Joomla Templates Club 406,261 posts

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#893018

When the template is viewed with a high resolution screen the (1600 px in width) the main menu changes to appear on two rows and the background area stretched in width. This is not looking good. Please assist on what to do.

What is interesting also is that the background colour is also being changed from grey to white when exceeding 1600 px in width.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#893208

Hi
You can use below code in custom.css file to apply the bg color when screen size is over 1600px

@media (min-width:1600px) {
body {
    background-color: #fff;
}}

Bootstrap max size for screen in the 1600px in HD container .
You can check this doc to change the width of template .

For the Menu go to /templates/ja_elicyon/tpls/blocks/header.php
Find this code

        <nav id="t3-mainnav" class="col-xs-12 col-sm-5 col-md-6 col-lg-7 navbar navbar-default t3-mainnav">

replace it with

        <nav id="t3-mainnav" class="col-xs-12 col-sm-5 col-md-6 col-lg-9 navbar navbar-default t3-mainnav">

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#893312

The code you gave me for the background colour is not working with screens ABOVE 1600 px in width. If I change to colour black … it will still be white when exceeding 1600 px.

Please assist again.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#893539

Hi
could u check it again and add the code , its working fine as i checked it . change the color code with your color .

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#893558

I added now the CSS code as you said and all is working fine. As you can see I have the colour #f7941e now in the background.

However, this is ONLY working when the resolution is equal to or LESS then 1600px.

Please see the attached image and let me know you comments on how to solve this.

This is getting more strange: If I reduce the size LESS then 1600px in width the background becomes GREY. Please look into this. There is a lot of time being consumed for such standard things.

Hope to hear from you soon again.

---

Attachments:

1. 
2. 
3. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#893805

Hi
in your first you asked how to change the bg color from gray to white when screen size is 1600px or more . At present the body using yellow color instead of white because u changed the custom.css color code .
Here u can see the code is working fine >> http://prntscr.com/aahyc0
You can use Media Queries and apply different style in for different screen size.
Hope its clear now .

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#894176

Thank you for your patience.

What I want to achieve is simple. I want to have the same background for any resolution. This was not the case when installing the template, which was the reason for my question. If this has not been clear I apologize.

So, let us wrap up this an finalize it. I would there like to get your input on how to do this, preferably with examples so that it is easy for me to understand and implement (I am not a coder but a "super user") … or even more helpful, if you can do this for me.

Do I have to use the Media queries (to be inserted in the custom.css) in order to achieve a single background for everything or can it be done easier?

I have removed any media queries in the custom.css now so that we can start from scratch and solve this (which results in a grey background for any resolutions up to 1600px, above this value the background changes to white for some reason.)

Hope to hear from you soon again.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#894193

Hi
the background color #f7941e is working fine for the body in large screen . The white color that you can see is the color of the container in that view .
Means when the screen size is 1680px the container width is 1656px , due to this you saw the bg color not showing. Its not problem .
Here you can see the size > http://prntscr.com/aamyso
If you want to change the size you can reduce the width from 1656 px to 1600px in template.css so you can see the color .

[chamvari Friend chamvariJoin date: October 2015Posts: 1Downloads:40Uploads:0]

#920429

I am new to this blog and i have a question related to the black menu background.. How do i change it to another colour ? i would also prefer it be transparent so that i can see the slide show image

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#920432

Hi @chamvari
Add below code in custom.css file
path : /css/custom.css create file if its not present .

.t3-header .container > .row { background-color: #222222!important; }
change the color code with your color code .

For next question kindly open your own separate thread . this topic is for different matter .

[Author]

Posts