Joomla Templates Club 406,261 posts

[melanieb Friend melaniebJoin date: July 2011Posts: 274Downloads:0Uploads:23 Thanks: 31 Thanked: 23 times in 1 posts]

#191789

Hi,

our logo has to sit on a white background but looks tack if I simply add a white square just where the logo is. I need to change the entire background colour where the logo and search are and also reverse the font colours in those areas (as otherwise they wont be visible).

How do I do this in Berenis?

Kind regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#510629

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set your site to “Development Mode” within your Template Manager–General settings

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#510664

Hi!
My first post.

I have also the problem with the logo. I need an white background.
Can´t post an url because its only an test system.
Thanks!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#510683

Which version of JA Beranis are you using – J2.5 or J3.1 ??

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510685

Hi melanieb,

You can make the background of header turn white by creating a custom.css file at templates/ja_beranis/css/ path and put below overridden css styles into:

/*Change the background color of header on JA Beranis*/
.t3-header.container {
background-color: white;
}
@media (max-width: 767px) {
#t3-header {
background: white;
}
}

2 users say Thank You to phong nam for this useful post

1. kmgdesign
2. melanieb

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#510687

JA Beranis 2.5

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#510692

Try This . . . .

Within file path –> /t3-assets/dev/templates.ja_beranis.less.style.less.css

at line 3, you should see the following:


.t3-header.container {
background-color: #01A3D4
padding-bottom: 20px;
padding-top: 20px;
}

Simply change the background-color code to/for white, as follows:


.t3-header.container {
background-color: #FFFFFF
padding-bottom: 20px;
padding-top: 20px;
}

Of course, you will also then need to modify the text color for your menu items, so your users will be able to see them better.

I recommend utilizing an online web development tool such as FIREBUG to help you identify the correct CSS files to modify.

*** IMPORTANT ***
After you save your changes, click COMPILE LESS TO CSS within your Template Manager–General settings.

1 user says Thank You to TomC for this useful post

1. melanieb

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#510714

thanks!

i took the custom.css

yes, the typo need another color and, this important, the dropdown needs also another color.

1 user says Thank You to kmgdesign for this useful post

1. TomC

[melanieb Friend melaniebJoin date: July 2011Posts: 274Downloads:0Uploads:23 Thanks: 31 Thanked: 23 times in 1 posts]

#510715

Hi Leo, Tom,

thank you both – that was perfect solution. Now I just need to find the menu font colours – I am guessing they will be in the template.css file? I shall have a play.

Kind regards

Mel 😀

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510722

Hi Mel,

The css styles of menu item font are stored in different .css file (megamenu.css, template-responsive.css and theme file). Anyways, you can try to put below override css styles into custom.css file too:

/*Font color of parent menu items*/
.navbar .nav>li>a {
color: blue;
}

/*Font color of child menu items*/
.t3-megamenu .dropdown-menu .mega-nav > li a {
color: red;
}

Change to the font color you want.

2 users say Thank You to phong nam for this useful post

1. kmgdesign
2. melanieb

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#510753

Thank you!
Fantastic, now i need at last the ‘hover and active’ color.
Is this okay:
a:link{color:#2598c7;}
a:visited{color:#2598c7;}
a:hover{color:#ffffff;}
a:active{color:#cccccc;}
?

At last, i want to change the ‘black’ backgound color from the dropdown. Where do i find the script?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510768

Hi kmgdesign,

The css definition of color effect on menu item should be:


/*Font color of parent menu items*/
.navbar .nav>li>a:hover {
color:#2598c7;
}

/*Font color of child menu items*/
.t3-megamenu .dropdown-menu .mega-nav > li a:hover {
color:#2598c7;
}


Apply the same format for other effects. By this way, the styles will be effective on Menu items only.

<blockquote>At last, i want to change the ‘black’ backgound color from the dropdown. Where do i find the script?</blockquote>

You can put below css styles into the created custom.css file too:

.t3-mainnav .dropdown-menu {
background-color: #222;
border: 1px solid #222;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

Change to the background color you want.

1 user says Thank You to phong nam for this useful post

1. kmgdesign

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#510952

hi,
the ‘active’ and the ‘hover’ coming in white or in transparent in the first level. this makes me crazy since hours. can’t find the right row. the drop down is fine.

and at last, theres an ‘black vertical line’, seems between the drop down (3 cols) i want to change the color.
thanks again.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510967

Hi kmgdesign,

You can try to put the below css styles override into created custom.css file:

/* Vertical line between columns inside dropdown menu*/
.t3-megamenu .mega-dropdown-inner .mega-col-nav .mega-inner {
border-right: solid 1px #333
}

/* 1st level active menu item */
.t3-mainnav .nav li.dropdown.active > .dropdown-toggle,
.t3-mainnav .nav li.dropdown.open.active>.dropdown-toggle {
background-color: transparent;
color: #fff;
}

/* Hover effect of 1st level menu item */
.navbar .nav > li > a:focus, .navbar .nav>li>a:hover {
background-color: transparent;
color: #fff;
}

And you can change the color corresponding to the code’s comments.

[kmgdesign Friend kmgdesignJoin date: October 2013Posts: 114Downloads:152Uploads:9 Thanks: 13 Thanked: 4 times in 3 posts]

#511111

1. white or transparent typo
2. small area with no active space
3. can´t switch the black lines to grey

should i post my custom .css file here?

thanks.

klem

---

Attachments:

1. 

[Author]

Posts