Sidebar color - Support | Kriesi.at - Premium WordPress Themes

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 27, 2016 at 11:28 am #622927

Wendy
Participant

Hi, I’ve tried to enter this code into my custom css, but the backgroundcolor keeps flooding into my main content.

@media only screen and (min-width: 768px) {
.container_wrap.sidebar_right{
background:-webkit-gradient(linear,right top,left top,color-stop(#f1f1f1,0.295),color-stop(white,0));
background:-webkit-linear-gradient(right, #f1f1f1 29.5%, white 0%);
background: -moz-linear-gradient(right, #f1f1f1 29.5%, white 0%);
background: -o-linear-gradient(right, #f1f1f1 29.5%, white 0%);
background: linear-gradient(right, #f1f1f1 29.5%, white 0%);
}
}

April 27, 2016 at 12:48 pm #622981

Josue
Inactive Moderator

Hi Wendy!

I’m not sure if that code is expected to work in fluid layouts where the content/sidebar width varies depending of screen size.

Best regards,
Josue

April 27, 2016 at 1:02 pm #622998

Wendy
Participant

Okay, is there any other solution? Should I fix the layout width?

April 27, 2016 at 3:00 pm #623129

Josue
Inactive Moderator

Hey!

What are you trying to achieve? the link you posted is returning a coming soon page.

Regards,
Josue

April 27, 2016 at 3:23 pm #623146

Wendy
Participant

I’m sorry… Try this one.

April 28, 2016 at 12:47 pm #623652
Josue
Inactive Moderator
Use this code instead:
```
#top .container_wrap.sidebar_right .sidebar{
    background: gray;
}
#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
    padding-right: 50px;
}

#top .container_wrap.sidebar_right .container {
    padding: 0;
}

#top .container_wrap.sidebar_right  .entry-content-wrapper {
    padding-left: 50px;
}
```
April 30, 2016 at 6:29 am #624858

Wendy
Participant

Hi Josue, thank you for your reply! :)

The sidebar however doesn’t go all the way down to the footer. Check the link below. Is there another code for editing this problem? Thank you!

April 30, 2016 at 11:15 am #624917
Josue
Inactive Moderator
Use this code instead:
```
#top .container_wrap.sidebar_right {
    background: #d6d6d6;   
}
#top .container_wrap.sidebar_right .sidebar{
    background: transparent;
}
#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
    padding-right: 50px;
}

#top .container_wrap.sidebar_right .container {
    padding: 0;
}

#top .container_wrap.sidebar_right  .entry-content-wrapper {
    padding-left: 50px;
    
}
#top .container_wrap.sidebar_right .content{
    background: white;
}
```
April 30, 2016 at 11:57 am #624940
Wendy
Participant
I’m sorry to bother you again… Now the background color seems to flow into my main content again… :(
- This reply was modified 8 years, 8 months ago by Wendy.
April 30, 2016 at 1:12 pm #624969
Josue
Inactive Moderator
Hi,

Change the #top .container_wrap.sidebar_right .content part to:
```
#top .container_wrap.sidebar_right .content{
background: white;
min-height: 750px;
}
```
Best regards,
Josue
April 30, 2016 at 1:20 pm #624978

Wendy
Participant

Thanks, this one works PERFECT! :))

April 30, 2016 at 1:34 pm #625000

Josue
Inactive Moderator

You are welcome, glad to help :)

Regards,
Josue

May 1, 2016 at 12:13 pm #625312

Wendy
Participant

Hi Joshue, I’m sorry to bother you again. The website is fully up and running, but I discovered that the responsive version of the website on the iPhone is having some trouble with the padding of the sidebar. Could you please check? Thank you.

May 1, 2016 at 1:00 pm #625318
Josue
Inactive Moderator
Hi,

No bother at all, just change the whole code to this:
```
@media only screen and (min-width: 767px) {
	#top .container_wrap.sidebar_right {
		background: #d6d6d6;   
	}
	#top .container_wrap.sidebar_right .sidebar{
		background: transparent;
	}
	#top .container_wrap.sidebar_right .sidebar .inner_sidebar  {
		padding-right: 50px;
	}

	#top .container_wrap.sidebar_right .container {
		padding: 0;
	}

	#top .container_wrap.sidebar_right  .entry-content-wrapper {
		padding-left: 50px;

	}
	#top .container_wrap.sidebar_right .content{
		background: white;
		min-height: 600px;
	}
}
```
As you’re hiding the sidebar on mobile we can set these changes to apply only on desktop.
May 1, 2016 at 1:32 pm #625324

Wendy
Participant

Ha! That’s it! Thanks! :D
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Sidebar color’ is closed to new replies.