2 Replies - 465 Views - Last Post: 20 December 2017 - 12:59 PM

#1 sayhello   User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 12-November 17

reworking the CSS in the wordpress-theme 2017

Posted 03 December 2017 - 01:31 PM

i just work on the theme- twentyseventeen that runs on a Wordpress-installation - that is - currently in the BETA-BETA mode. So sorry for this.. see the page http://www.f-s-j.de


i want to change content and sidebars width http://www.f-s-j.de

Id like to change the width of the content and sidebars on my domain: http://www.f-s-j.de
Id like to have a wider content area to show the posts and pages better, then make the sidebar narrower and more to the right.
And is it possible to modify the percent of the sidebar and content?

additionally: i need to be sure that the after making this change, the padding beside the menu (is) remains small

question: Can I do that through style.css?
guess that i have to do it with this following method:

i need to follow below steps:
1. Login as admin and go on theme customizer Dashboard >> Apperance >> Customize or Click on Custimze link on top bar from front-end.
2. Then navigate Additional CSS and put a ___certain css___ into textarea then click on Save & Publish button.

The question is which ___certain css___ can be used?

and yes: if it is possible to modify the percent of the sidebar and content this would be great.

love to hear from you

greetings
dilbert

ps - see the attachment:


see the options i have tried: i tried several code-snippets



.wrap {
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
}







and this one too:

.pdb-list {
    max-width: none;
    padding: 0;
}


.home .panel-content .wrap {
    max-width: 88%;
}





and this one:

.wrap { max-width: 1366px; }

/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}

/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}





and finally this one ...


/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
div#primary {
width: 70% !important;
}

To change right side sidebar width

#secondary {
width: 20% !important;
}

or

to change whole site width

.wrap {
max-width: 100% !important;
}




well i am a bit clueless at the moment.

Is This A Good Question/Topic? 0
  • +

Replies To: reworking the CSS in the wordpress-theme 2017

#2 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5259
  • View blog
  • Posts: 14,073
  • Joined: 18-April 07

Re: reworking the CSS in the wordpress-theme 2017

Posted 15 December 2017 - 12:40 PM

Yes everything is still through styles.css. I am not a huge fan of the relatively new customizer but the styles for any theme are in the styles.css. Use your dev tools to locate which styles control the widths of elements etc and then it will point to the styles.css in the theme where you can go change it. If you change a value and it doesn't seem to work, you are probably not changing the style at the right level of the cascade and some other style is blocking your efforts.

But again everything can be changed via styles.css for most themes. Whatever css files come with a theme in the theme directory of your wordpress is what controls the theme users see. :)
Was This Post Helpful? 0
  • +
  • -

#3 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 53
  • Joined: 11-August 17

Re: reworking the CSS in the wordpress-theme 2017

Posted 20 December 2017 - 12:59 PM

Yea i ca totally vouch for what Martyr has said. I sometimes take the demo themes like 2017 and wre write them and all of the css is usuaally in a style sheet. A really good way to check is open the website in a browser , inpect element then you will find the class or id or whatever you need to changes css rules there NOW in the top right hand corner ther will be a small link. It will look something like this :

Class { ...style.css?ver=20170504 <---- this here is the stylesheet that rule is being pulled from

Rules blah blah

}
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1