Community Forums › Forums › Archived Forums › Design Tips and Tricks › WIDEN LIFESTYLE THEME?
- This topic has 32 replies, 3 voices, and was last updated 10 years, 11 months ago by Dorian Speed.
-
AuthorPosts
-
March 11, 2013 at 10:59 am #25475livingbetterbradMember
Hey folks,
Anyone know how to widen the body of the Lifestyle theme?
Here's my site and I'd like it to be overall wider - so it stretches out the content etc...
Any help would be extremely appreciated!
Thanks 🙂
BradMarch 11, 2013 at 11:37 am #25481Dorian SpeedMemberThe theme is made up of several structural elements - basically, the different "boxes" on the site. So there is not one setting that can be changed to make it wider.
If you use Firefox as your browser, there's an extension called Firebug that will let you look at the underlying code to see what determines the layout. You can use the HTML tab in Firebug to see how the elements are set up, and then switch to looking at the style.css document to see what determines the styling of those elements. You're going to be looking for things like "inner," "wrap," "header," "content-sidebar-wrap," and "footer," to begin with. The cool thing about Firebug is that you can change values in the style.css file and see how it would look if you made the changes on your actual site. I believe Lifestyle is based on a 960px setup so that would be the first thing you would want to increase - that width.
Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!March 31, 2013 at 10:29 am #32273livingbetterbradMemberThanks for your reply.
I'm just getting confused.....
I can't find anything that is the total width of the site and I use the search in Firebug for 960 and nothing appears.
Where would I start?
This is my webiste http://www.livingbetter.me and if you can see where I should start widening and what boxes need to be widened I would genuinely appreciate it 🙂
Thank you <3Brad
March 31, 2013 at 2:43 pm #32330livingbetterbradMemberWhy won't my pasted code appear here?
March 31, 2013 at 3:15 pm #32339SusanModeratorWhy won’t my pasted code appear here?
Refer to the FAQ #5 to see how to paste code here on the forum. (ignore the html code...)
Here is the visual markup guide, which will show you the various elements which will need changing:
http://www.studiopress.com/images/gen_markup.pngMarch 31, 2013 at 3:36 pm #32344livingbetterbradMemberSo, in the image you provided a link for - I change the orange colored sections/labels?
March 31, 2013 at 3:38 pm #32345livingbetterbradMemberHello World
My copied code:Living Better — Now that’s Living Better!
Now that’s Living Better!
You are here: Home
Nutrition Nutrition (also called nourishment or aliment) is the provision, to cells and organisms, of the materials necessary (in the form of food) to support life. Many common health problems can be prevented or alleviated with a healthy diet. The diet of an organism is what it eats, which is largely determined by the perceived palatability of
WHY in the World Are They Spraying?
March 31, 2013 at 3:39 pm #32346SusanModeratorRight - that directs you to the various parts of the site that would need to be adjusted in your CSS. For example, the #wrap is the entire width of the site, but changing just that won't change the other areas, so whatever you adjust the wrap by, you want to make adjustments in other areas, whether you decide you want wider sidebars, or a wider content area, for example.
March 31, 2013 at 3:39 pm #32347livingbetterbradMemberHmmm....Doesn't show the code.....
I'll try this:Living Better — Now that’s Living Better!
Now that’s Living Better!
You are here: Home
Nutrition Nutrition (also called nourishment or aliment) is the provision, to cells and organisms, of the materials necessary (in the form of food) to support life. Many common health problems can be prevented or alleviated with a healthy diet. The diet of an organism is what it eats, which is largely determined by the perceived palatability of
WHY in the World Are They Spraying?
March 31, 2013 at 3:41 pm #32348SusanModeratorWhat code are you attempting to put in her? You don't need to put in your entire stylesheet, for example - we can see your stylesheet through your site.
March 31, 2013 at 3:42 pm #32349livingbetterbradMemberOk, thank you. I wanted everything to be wider in the header,footer,middle column - while keeping the two widget side columns the same size....I appreciate all your help. I made all the changes in Firebug, copied the code and pasted it into my Editor in WordPress dashboard - but it failed. Any tips on pasting the copied code?
March 31, 2013 at 3:43 pm #32350livingbetterbradMemberThe code copied from changes made in Firebug. 🙂 I made all the changes and then copied the new sheet in Firebug.
March 31, 2013 at 3:44 pm #32351SusanModeratorI use a text editor (I use textpad, but you can use notepad - you want to make sure you're not using something like MS Word.)
You could FTP it into your stylesheet in your child's theme folder on your hosting site.
March 31, 2013 at 3:45 pm #32352livingbetterbradMemberLiving Better — Now that’s Living Better!
Now that’s Living Better!
You are here: Home
Nutrition Nutrition (also called nourishment or aliment) is the provision, to cells and organisms, of the materials necessary (in the form of food) to support life. Many common health problems can be prevented or alleviated with a healthy diet. The diet of an organism is what it eats, which is largely determined by the perceived palatability of
WHY in the World Are They Spraying?
March 31, 2013 at 3:47 pm #32353livingbetterbradMemberI'm using BBEdit
March 31, 2013 at 3:48 pm #32354livingbetterbradMemberHow do it do that? Can you give me a step by step breakdown as I have to leave my computer for a while. Thank you for all your help and I will check when I get back <3
March 31, 2013 at 3:50 pm #32355livingbetterbradMemberCan you give me a step by step on that? I have to leave for a while and will check back once I return. Thank you <3
March 31, 2013 at 9:50 pm #32384Dorian SpeedMemberJust checking, but for each element you change, you are REPLACING the code in the stylesheet, not ADDING it, right?
Bringing websites Up to Speed
Firebug will light the way to understanding the secrets of the Internet!March 31, 2013 at 10:20 pm #32387livingbetterbradMemberYes - in the editor section ( on right - small box ) in Firebug - when it shows the diagram of the area I'm fixing - I click on the dimensional number and make it bigger. If it's 420 pixles - I make it 720 pixels etc..
Thanks!April 2, 2013 at 1:58 pm #32677livingbetterbradMemberI'm in the WordPress dashboard right now.
Appearance>Editor>Stylesheet style.css
I'm having difficulty locating these:
#content.hfeedAs well - there seems to be no div tags - which is odd as Firebug clearly shows them 🙁
I can see in Firebug where I am making changes but having a hard time finding the same code in my .css in my WordPress Dashboard....
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.