• Custom CSS, Changing color of secondary design style

    1 vote Up Down

    On Jul 26, 2017 meir wrote:

    Hi Bookmark Team, 

    I wanted to know if it was possible to change the secondary color for the brand background, I only seem to be able to change the main color of the navbar. I would also like to enlarge the logo. Therefore I would like to know how I can add custom css or Javascript to website. Thanks!



    4 Answers
    1 vote Up Down

    On Jul 26, 2017 justincredible wrote:

    Hi Meir,

    There are several ways to inject custom javascript /CSS.  Could you share with me the link to the Bookmark site you are trying to alter the branding background to?  I'll reply with the code needed and where to put it..


    answered 5 months ago

    1 vote Up Down

    On Jul 26, 2017 justincredible wrote:

    Hi Meir,

    So I am assuming that you are using the Tranquility Tempate as it is the one that i first had a notion to try to change the background behind the logo.  Is this the template you started with?

    Tranquility template

    If not, let me know the link to your site.  

    If so, this is how you change the background using CSS:

    Step One: Drag a <> Code Module into the footer of the page

    Step Two:  Add the following block of code into that module, changing the #hex colors to your preference

     

    Step Three:  If you want this to be the same for all pages on the site, click DESIGN> FOOTER>  scroll to bottom and click SAVE FOR ALL PAGES

    Here is a link to one Bookmark site that I have done this with Rosebud Continuum

    Bonus tip:  If you want the behind the navbar background to match the information popup, simply add the other CSS selectors as so:

     

    Good Luck... let me know how it turns out.

     


    answered 5 months ago

    On Jul 26, 2017 Bookmark Dave commented:

    Thank you Justin that is a very good answer.  You're awesome!

    0 vote Up Down

    On Jul 27, 2017 meir wrote:

    Could you post the code block snippet again? There's nothing appearing on the screen the space. 

    It was the Tranquility template's logo, I was trying to adjust it's background color and size. 


    answered 5 months ago

    0 vote Up Down

    On Jul 27, 2017 justincredible wrote:

    sure.. no problem... for some reason this page must have swallowed the css

    so you'll put this in the code blog wrapped in <style> </style> tags

     

    div.navbar-header {background: #544; /*fallback*/ background: linear-gradient(#544, #565);}

     

    to make all of it uniform, youll place this wrapped in style tags

     

    div.nav.bm-brand-background-color,div.container-fluid.info_popup,div.navbar-header {background: #544; /*fallback*/ background: linear-gradient(#544, #565);}

     

    you can also get rid of the   /*fallback*/ background: linear-gradient(#544, #565);   if you just want a solid color

    hope this helps


    answered 5 months ago