Changing my site color to a single color

    • 217 posts
    February 11, 2019 10:11 PM EST

    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.

    • 217 posts
    February 13, 2019 7:12 PM EST

    Can anyone help me with this?

    • 201 posts
    February 27, 2019 8:16 PM EST

    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; }
    • 217 posts
    March 3, 2019 3:40 PM EST

    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; }
    This post was edited by socialenginestaff at March 3, 2019 7:19 PM EST
    • 201 posts
    March 3, 2019 4:06 PM EST

    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.


    This post was edited by Miami Shade at March 3, 2019 5:14 PM EST
    • Moderator
    • 6923 posts
    March 3, 2019 7:19 PM EST

    @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.

    • 217 posts
    March 3, 2019 8:12 PM EST

    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.

     

    • Moderator
    • 6923 posts
    March 4, 2019 9:37 AM EST

    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. 

    • 119 posts
    March 4, 2019 3:14 PM EST

    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


    This post was edited by Maurits at March 4, 2019 3:15 PM EST
    • 217 posts
    March 4, 2019 4:30 PM EST

    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!

    • Moderator
    • 6923 posts
    March 5, 2019 5:25 AM EST

    Great! cool

    • 119 posts
    March 5, 2019 6:20 AM EST

    No problem laughing

    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.


    This post was edited by Maurits at March 5, 2019 7:06 AM EST
    • 217 posts
    March 6, 2019 6:18 PM EST

    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?

     

    • 119 posts
    March 6, 2019 8:19 PM EST

    @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

     

     

    • 217 posts
    March 19, 2019 2:20 PM EDT

    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!

     

    • Moderator
    • 6923 posts
    March 20, 2019 10:04 AM EDT

    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.

    • 629 posts
    March 21, 2019 5:45 PM EDT

    glad you got this sortedthat's the great thing about themes in social Engine, you have so much control over how they can display.

  • March 9, 2020 7:17 PM EDT

    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.


    This post was edited by socialenginestaff at March 10, 2020 5:28 AM EDT
  • March 9, 2020 7:21 PM EDT

    Here is what I am referring to:

    No one can eat the word "Events" as it is too grey and should be white.

  • March 9, 2020 7:29 PM EDT

    I would be happy with the default blue Serenity theme if I can figure out how to change the color of the pink boxes.

    • Moderator
    • 6923 posts
    March 10, 2020 5:19 AM EDT

    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. 


    This post was edited by socialenginestaff at March 10, 2020 5:22 AM EDT
    • Moderator
    • 6923 posts
    March 10, 2020 5:27 AM EDT

    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.

  • March 10, 2020 1:34 PM EDT

    Please explain how to change the green background cause I don't see any green on the theme settings!

  • March 10, 2020 4:12 PM EDT

    Nevermind I found my mistake....thx