Support ⇒ Themes ⇒ [solved] Decreasing the width of redesign3 ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexThemes

[solved] Decreasing the width of redesign3 Reply to topic


Hi, I am curious if there is any way of decreasing the width of the theme itself? I am currently using the reDesign3 template. What I want to do is decrease the view of a template say about 2 inches on both side then add a carbon theme look to the background. My website is @ www.huntandfishing.net

Thanks in advance,

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0


The width (assuming that you want fixed width) in the rD3 theme is controlled by the mainstyle.css. In fact that's about all that css file does, control the width, minimum width, centering, etc.

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


Okay I have the following info, and want to make my theme to a fixed width. What do I need to change and does it already have another background in the back of the template? Or do I need to make one?

Thanks,


/* This file is loaded only if real header.html template is used.
Anything here will overwrite style.css counterpart
*/


/*Apply the full width fix*/
@import url('hack.css');

html {
/*background-color: #699B64;*/
/*background: #699B64 url('../images/backgrounds/body/html_background.gif') no-repeat 0% 100%;*/
background-color: #FFF;
xpadding-top: 10px;
}
/* The main values */
body {
width: 98%; /* for full width design use 100% */
width: 100%;
min-width: 820px; /* to enable scrollbar if windows is too tiny, so it won't mess up */
margin: 0 auto; /* aligns site to horizontally middle of the page */
background: transparent url('../images/backgrounds/header/headerbg_exp.jpg') repeat-x top left;/*menu expandable bg here*/
position: relative;
}

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0


Uncomment this line:background: #699B64 url('../images/backgrounds/body/html_background.gif') no-repeat 0% 100%;and point it at a real image. Create a body folder in {your rD3 theme folder}/images/ folder and put the jpg or gif file in there.

Then reduce width: 100% to something smaller so you can see the sides of the image.

Finally change the background colour (in hexadecimal rgb) from #699B64 to whatever you want to show if the user's browser window is bigger than the background image.

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


Do I need to change this line?

background-color: #FFF;

into

/*background-color: #FFF;*\


Also do I need to worry about this?

xpadding-top: 10px;

Sorry I'm New to this.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0


The 3 background lines are alternatives, so just comment out the 2 that you don't want.

As for the xpadding try it before you worry about it.

and selecting one of the W3school links near the top will usually answer most questions. Or HTML command-name for similar advice from same source on HTML code.

In this case xpadding-top is I think an invalid CSS command and so is likely ignored. So you can probably comment it out anyway.

Also getting yourself an editor which parses (colour codes) CSS and HTML while you type will help tremendously. Geany or Notepad++ etc.

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


Ok, Thanks for your help. I got the background to show and the width of the theme to my liking. Now I just have to create a taller background, so the pages that require scrolling will not be missing a piece of the background.


Again, Thanks for all the help!

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0


Good so far, but I don't think it is your background too small. Something else is displaying in the space in the header area, so the background is overwritten, maybe.

Have a look in style.css and header.html.

By the way, you need to make changes to mainstyle.css directly (I always leave the old lines commented out above my new lines - so if I have to update to a later version I can see what I changed).

But with styles.css you don't make changes per se. Copy any style that you wish to change to specific.css and amend it there. Indeed you can delete individual lines that you don't want to effect changes for. That way you have just a personal custom css file containing only your changes, which you can apply to any later version without having to locate all your changes. Don't worry, anything you add in specific.css will be applied after anything in style.css. That's what Cascading Style Sheets means. (Pro_News has same capability with pn_specific.css.)

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


Yea, If your talking about my header being half black. That's how reDesign3 came as. So far looks like making a bigger background worked out. Now I notice something with my iphone4(safari browser) I couldn't tell on my computer. The message, copper mine gallery, and pro news does not auto adjust to my theme, they slide to the bottom. Any thoughts? Do I have to go back and set a lower min-resolution? Or is it my browser?

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0

Last edited by wingz on Tue Feb 07, 2012 10:04 am; edited 1 time in total


wingz wrote
Yea, If your talking about my header being half black. That's how reDesign3 came as. So far looks like making a bigger background worked out.

No I was referring to the white "squares" of nothing in upper corners, either side of the header image.

wingz wrote
Now I notice something with my iphone4(safari browser) I couldn't tell on my computer. The message, copper mine gallery, and pro news does not auto adjust to my theme, they slide to the bottom. Any thoughts? Do I have to go back and set a lower min-resolution? Or is it my browser?

Known issue with reDesign if you display material that is wider than the main panel (excluding block columns) then browser moves everything down past the end of the block bottom trying to find more room.

You can probably recreate on your PC browser by making the browser window narrow enough.

Solutions are varied. But none very straight-forward. One way though is to hide blocks for those modules.

Widening your setting in mainstyle.css would help some. You have it set to less than half width, only reason it is not that narrow is because of the min-width of 820px. That's how wide you usable space is. Ie. you are on the minimum, in fact it may give you scroll problems on IE6/7. Suggest something like 95% instead of 45%.

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


Ok, I've change the min-width to 1000px and upped the theme to 70%. Seems to look fine now on my mobile browser.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux/Apache2.2.19 (Unix)/MySQL 5.1/PHP 5.2.*/DragonflyCMS 9.3.3.0


layingback wrote
In this case xpadding-top is I think an invalid CSS command and so is likely ignored. So you can probably comment it out anyway.


Indeed, I used to prefix css properties with x to temporarily comment them out, as it's shorter than surrounding it with real block comment tags.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
-


Eestlane!!!!

I've sent you a PM ...

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4

All times are UTC


Jump to: