I desperately want to change the color of the theme from the two-tone pink that you can see on the menu bar to a single shade of pink which matches my logo at werunthehouse.org. I have spent a lot of time trying to do this myself by looking through the code in my theme but I have not managed it. If you could help me do this I would be so grateful.
Can anyone help me with this?
This is the element just change the color codes to whatever you want in custom CSS
.layout_core_menu_main {
width: 100%;
text-align: left;
overflow: hidden;
background: #ff6f89 linear-gradient(141deg, #ff6f89 0, #ff6f89 51%, #e376bf 75%) repeat scroll 0 0;
}
Thank you so much for helping me here MiamiShade! Unfortunately I was not able to remove the gradient of color.
I can't find the code you have typed above so I copied out the whole section relating to the main menu in the script:
/*
MAIN MENU WIDGET
*/
.layout_core_menu_main
{
width: $theme_topbar_menu_width;
text-align: left;
overflow: hidden;
background: $theme_topbar_menu_background_color;
}
.layout_core_menu_main .navigation
{
width: $theme_topbar_menu_width;
margin: 0px auto 0px auto;
white-space: nowrap;
overflow: hidden;
}
.layout_core_menu_main .navigation > li
{
float: left;
font-size: $theme_topbar_menu_link_size;
font-weight: 600;
padding: 7px 0;
line-height: 1em;
}
html[dir="rtl"] .layout_core_menu_main .navigation > li
{
float: right;
}
.layout_core_menu_main .navigation > li a
{
+noselect;
outline: none;
display: inline-block;
padding: 8px 15px;
text-transform:uppercase;
font-weight:600;
border-radius: 20px;
transition: all .2s ease-in-out;
background-color: $theme_topbar_menu_link_background_color;
}
.layout_core_menu_main .navigation > li a:link,
.layout_core_menu_main .navigation > li a:visited
{
color: $theme_topbar_menu_link_color;
text-decoration: $theme_topbar_menu_link_decoration;
}
.layout_core_menu_main .navigation > li.active a:link,
.layout_core_menu_main .navigation > li.active a:visited
{
color: #e376bf;
background: #ffffff;
}
.layout_core_menu_main .navigation > li > a:hover
{
background: $theme_topbar_menu_link_background_color_hover;
color:$theme_topbar_menu_link_hover_color;
transition: all .2s ease-in-out;
}
.layout_core_menu_main .navigation > li > ul
{
display: none;
}
.layout_core_menu_main .navigation > li:hover > ul
{
display: block;
}
.layout_core_menu_main ul ul
{
display: none;
position: absolute;
background-color: $theme_topbar_menu_background_color;
margin: 0px 0px 0px 0px;
min-width: 170px;
}
.layout_core_menu_main ul ul li
{
font-weight: 600;
}
.layout_core_menu_main ul ul li a
{
letter-spacing: 0px;
font-weight: 600;
text-decoration: none;
display: block;
padding: 4px 7px 6px 9px;
outline: none;
color: $theme_topbar_menu_link_color;
text-decoration: $theme_topbar_menu_link_decoration;
background-color: $theme_topbar_menu_link_background_color;
}
[dir="rtl"] .layout_core_menu_main ul ul li a
{
padding: 4px 9px 6px 7px;
}
.layout_core_menu_main ul ul li:hover a
{
color: $theme_topbar_menu_link_hover_color;
text-decoration: $theme_topbar_menu_link_hover_decoration;
background: $theme_topbar_menu_link_background_color_hover;
}
I will try to help but maybe I am not clear on what you need. I see your highlights throughout the site are pink and you have a two tone pink and purple menu bar. Can you re clarify what you need & when you add code in the forum you need to use the insert code icon.
@cmackie, please follow our posted guidelines and always put code in the code tags by using the symbol to the right of the smiley symbol. I fixed your post but next time it will be deleted per our terms.
I want to remove the gradient of color seen in this screenshot and make it a single color so it matches the color in my logo. The color on the right of the main menu bar matches the logo. As you will see the color on the left does not.
Using the demo as a guide https://demo.socialengine.com/admin/themes?file=constants.css you would go to your contstants.css of the cloned theme (not editing any of the default themes) and remove the gradient:
theme_topbar_menu_background_color: #1bc1d6 linear-gradient(141deg, #1bc1d6 0%, #1bc1d6 60%, #0fb8ad 100%) repeat scroll 0 0;
to (and this is the blue, use your own color
theme_topbar_menu_background_color: #1bc1d6;
clear cache and browser cache. That should work but I've not tested it.
as long as you place it at the bottom like:
/* CUSTOMS CSS */
place code here
It will overwrite the CSS as it reads from the top to the bottom.
If is still takes the old colour use !important; at the end so you force the CSS to use this background colour
Yeah! I did it. I found the line of code thanks to Donna and substituted the same color throughout the line of code (Donna's suggested method did not work).
Thanks Donna! Thanks Maurits!
Great!
No problem
Note: If you do an SE update the CSS-files will be overwritten if you use the Main Theme CSS files, but if you use a COPY of the theme, these files should not be overwritten.
I normally keep a copy of the CUSTOM CSS in a text file. If things go wrong, delete all custom CSS in the theme and add a fresh copy at the bottom again.
I'm a bit confused. I remember I cloned my theme. Now when I am in layout editor whether I select theme.css or constants.css they both say clone. See screenshots. They also both say active. How do I go back to the original and leave the clone?
@cmackie:
You need to add extra code at the bottom of the theme.css
Enter a few empty line, by pressing enter
Then add the following code:
/* CUSTOM CSS BELOW */
/* - START - Change menu background color */
.layout_core_menu_main {
background: #1bc1d6;
}
/* - END - change menu background color */
Change background: #1bc1d6 ; to your own HEX #color
This code must be at the bottom of the theme.css file, like pic 2
If it doesn't take your colour background should be:
/* CUSTOM CSS BELOW */
/* - Change background colour menu */
.layout_core_menu_main {
background: #1bc1d6 !important;
}
/* END change menu background color */
This last bit of contains [ !important; ] which forces the CSS to be used instead of the standard given CSS by SEPHP
I am not sure whether we are understanding each other fully. I fixed everything to do with the color and I am really grateful for your help (and Donna's help) with that.
Now I am trying to make sure that my theme is backed up. Based on the pictures above I only seem to be able to switch between the clones I made. If I eventually wish to revert to the original theme (prior to cloning) will I be able to? Also, how do I back up my clone?
Thank you!
Themes are managed in the theme manager when you choose one and select it as the default theme. Here is the theme tutorial, https://www.socialengine.com/support/article/5243363/se-php-theme-editor . To back up your theme, click Export when in the theme editor.
glad you got this sortedthat's the great thing about themes in social Engine, you have so much control over how they can display.
I tried what you said with this code in the theme.css
/* CUSTOM CSS BELOW */
/* - Change background colour menu */
.layout_core_menu_main {
background: #026e07 !important;
}
/* END change menu background color */
I have the Serenity.clone as my active theme and it still doesn't work. I want to use a darker green and make the font colors in the menu to be white.
Here is what I am referring to:
No one can eat the word "Events" as it is too grey and should be white.
I would be happy with the default blue Serenity theme if I can figure out how to change the color of the pink boxes.
It should work via the cloned theme you made. https://www.socialengine.com/support/article/98238465/sephp-serenity-theme try it that way. I've been able to customize quite a lot here in the forum with a custom theme. I actually made one in the appearance > theme manager and one in the serenity theme settings. I'll go check on staging as I don't want the pink changed here.
First I tried by going to the Serenity theme settings and creating a clone theme there. Then, I changed the pink to a light blue. It worked fine with the site in development mode. Once done, take the site out of development mode.
These are not colors I would recommend to use but are an example. All done in the Serenity settings found in the tutorial I linked.
Please explain how to change the green background cause I don't see any green on the theme settings!
Nevermind I found my mistake....thx