Oxygen them, working on right sidebar

orientaltextiles · Member · May 22, 2015 at 6:06 am
Copy link

Add topic to favorites
The website in question is http://paulshaperproductions.com/
Oxygen Theme

I now know how to remove the right sidebar and recover that space for post/page content, also adjust the width on some other elements so that they align on the right: (thanks for help from thesacredpath)

#tertiary {
display: none;
}
.page-template-showcase-php #content, #content {
margin-right: 0;
}
.comments-title, #comments #reply-title {
width: 100%;
}
.section-title h1 {
width: 96%;
}

Then I wish to reverse that change on a page-by-page basis by using the page id CSS body class, please show me know. Thanks!

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · May 22, 2015 at 6:43 am
Copy link
Hi.

To do this, first thing you need to know is how to identify each page. This support document shows how to take a look inside a web page, which is very interesting because one of the first elements in the HTML tree is the body tag. How do this tag looks like?

In your page http://paulshaperproductions.com/totally-custom/

Your body tag is: <body class=”page page-id-1445 page-template-default custom-background mp6 typekit-enabled customizer-styles-applied highlander-enabled highlander-light custom-colors”>

Ok, so this page has a body tag with one of his classes=page-id-1445. This is what you are looking for. Then you just need to add this class at the beginning of each css rule you want to restrict and the rule will only apply to those pages with this class in the HTML tree. For instance:
```
. page-id-1445  #tertiary {
display: none;
}

. page-id-1445 .page-template-showcase-php #content,
.page-id-1445 #content {
margin-right: 0;
}
```
Take into account your css selector (the indication of where do you want to apply css rules, before the open curly brackets) can be composed. I mean, you can add several selector with commas and this rule will apply to any of them. You can use this to apply the same rules to several pages. For instance, your main page body class is .page-id-1243, so you could use these rules:

.page-id-1243 #tertiary,
.page-id-1445 #tertiary {
display: none;
}

.page-id-1243 .page-template-showcase-php #content,
. page-id-1445 .page-template-showcase-php #content,
.page-id-1243 #content,
.page-id-1445 #content {
margin-right: 0;
}

I hope that was clear. Otherwise, please, do not hesitate to ask me to explain better any point. :)
orientaltextiles · Member · May 22, 2015 at 3:19 pm
Copy link
Thanks raulanton for taking the time to help.
Will study your explanations carefully :)

Really appreciate it!
staff-jeanpierreac · Staff · May 22, 2015 at 4:12 pm
Copy link
:) Enjoy your blog and the weekend!
kathrynwp · Staff · May 22, 2015 at 4:36 pm
Copy link
This is a duplicate question – looks like raulanton gave you some great information, and I also replied to the original question here:

https://en.forums.wordpress.com/topic/oxygen-theme-how-to-remove-secondary-sidebar-in-order-to-use-that-space
staff-jeanpierreac · Staff · May 22, 2015 at 9:24 pm
Copy link
Yes @kathrynwp. Sorry for that: I didn’t seen the other answer.

Have a nice weekend
kathrynwp · Staff · May 22, 2015 at 9:27 pm
Copy link
No worries, I missed yours as well until after replying. ;)

No items found.