Community Questions

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 3 years 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 3 years ago

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 3 years 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 3 years ago

Activities

Total Questions: 620

Total Answers: 431

Top Users

Need more support?

Most frequently asked questions will be found inside our community. If you would like to contact us directly we’d love the opportunity to help you. Chat with us online by clicking the message icon on the bottom right side.