Author Topic: Help with styles (Read 4300 times)

JH · « **on:** August 15, 2008, 10:05:15 pm »

Forum Url: http://hullahoop.smfforfree.com
Hey, I'm trying to modify the "red" style by adding an orange background, but for some reason it is not letting me. Is there any way I can work off of the "red" style?

simply sibyl · « **Reply #1 on:** August 15, 2008, 10:12:13 pm »

Quote from: JH on August 15, 2008, 10:05:15 pm

Forum Url: http://hullahoop.smfforfree.com
Hey, I'm trying to modify the "red" style by adding an orange background, but for some reason it is not letting me. Is there any way I can work off of the "red" style?

After changing the color code in the style did you reload your browser? Have to do that to see the changes.

wizer · « **Reply #2 on:** August 15, 2008, 10:13:43 pm »

Admin--> Manage Styles --> Pick the Red style. Go down to the bottom where the css is, click anywhere in the box. Do an edit--> select all. Copy the entire contents of the css box. Then go back up to the top, and click on "create" (for create new style). Give it a name, and save it. Then replace the entire contents of the css box by doing an edit--> select all (like you did before), delete the existing contents of the css box and paste in the css contents you took from the red theme. Here you can modify the background color and everything else in your newly created style, using the red theme as a starting point.

simply sibyl · « **Reply #3 on:** August 15, 2008, 10:15:10 pm »

Shouldnt have to go through all of that. You CAN edit the red style itself.

wizer · « **Reply #4 on:** August 15, 2008, 10:18:18 pm »

Quote from: simply sibyl on August 15, 2008, 10:15:10 pm

Shouldnt have to go through all of that. You CAN edit the red style itself.

Oh. Come to think of it I think that's what I did using the light brown. I guess the only advantage is that it leaves the red unchanged in case he messes something up, then he can go back and start over or replace the messed up code from the red. And it's really not that much work, you are talking a couple of copy and paste operations. Under a minute, two tops..and you get a nice new name for your custom style.

JH · « **Reply #5 on:** August 15, 2008, 10:19:54 pm »

Quote from: wizer on August 15, 2008, 10:18:18 pm

Quote from: simply sibyl on August 15, 2008, 10:15:10 pm
Shouldnt have to go through all of that. You CAN edit the red style itself.

Oh. Come to think of it I think that's what I did using the light brown. I guess the only advantage is that it leaves the red unchanged in case he messes something up, then he can go back and start over or replace the messed up code from the red. And it's really not that much work, you are talking a couple of copy and paste operations. Under a minute, two tops..

Its changing the background, but the theme is still the blue one. I tried the copy and paste method twice!

simply sibyl · « **Reply #6 on:** August 15, 2008, 10:26:04 pm »

did you choose the red style with the style picker? After you modify it you need to choose it.

JH · « **Reply #7 on:** August 15, 2008, 10:27:26 pm »

Quote from: simply sibyl on August 15, 2008, 10:26:04 pm

did you choose the red style with the style picker?

I coppied the css of the red style and pasted it in my new style and changed the background. The background was changed but not the red.... ness.

wizer · « **Reply #8 on:** August 15, 2008, 10:29:48 pm »

Quote from: JH on August 15, 2008, 10:27:26 pm

Quote from: simply sibyl on August 15, 2008, 10:26:04 pm
did you choose the red style with the style picker?

I coppied the css of the red style and pasted it in my new style and changed the background. The background was changed but not the red.... ness.

Um...if you changed the background in the css, that's all that's gonna change. To change the "redness" you have to address each area in the css separately. There are sections for changing the headers of each section, the backgrounds of the post boxes, the font faces and colors...lots of things...look at the upper part of the page where you pasted all the css and you will see that each section has to be changed independently of the rest.

simply sibyl · « **Reply #9 on:** August 15, 2008, 10:37:47 pm »

This is how you do it.

Click on Manage Styles.

If you have not already clicked on the red style do so and make sure you have it showing on the screen.

Click on Modify Style.

Choose "red" in the dropdown box and clik the pick style button

Go to the very bottom where the css is in the white box.

Look for this section:

Code: [Select]

/* The main body of the entire forum. */
body
{
	background-color: #E8E5E5;
	margin: 0px;
	padding: 12px 30px 4px 30px;
}

Change #E8E5E5 to the color code you want for the background
Click Modify STyle at the bottom of the page

Reload your browser to see the change.

JH · « **Reply #10 on:** August 15, 2008, 10:38:57 pm »

Ok, I'm trying everything your saying but it won't work, even the background keeps changing back.

That is the current username and password of my account. If any of you can try and make a theme that is like "red" with orrange background, that would be really neat.

The forum is brand new, I'm not concerned with getting hacked.

Thanks.

EDIT: Never mind, I'll try this first.

simply sibyl · « **Reply #11 on:** August 15, 2008, 10:40:17 pm »

I edited your username and password out of your post.

IMMEDIATELY change your password. Anyone getting email notifications of these posts now has your information

Never post that information in a forum and never give it to anyone.. Not ever.

Read thru my last post if you missed it...

wizer · « **Reply #12 on:** August 15, 2008, 10:43:03 pm »

Sibyl, I think he expects all of the red to disappear from his new theme, and all that's going to change here is the background.

The rest of the theme is still red and has to be changed individually.

And yeah, giving out your password...of course it matters. Any loser can lock you out of your own board.

JH · « **Reply #13 on:** August 15, 2008, 10:44:28 pm »

lol, I did these kind of things before and it didn't freak anybody out. Plus I changed my original password odiviously

Your method did not work. in fact it even already said the code of the color I want. Any other suggestions?

EDIT: BTW, I do want all of the red, thats the point. I just want the background to be orrange.

simply sibyl · « **Reply #14 on:** August 15, 2008, 10:45:32 pm »

Here is the red style with your orange color for the background:

Keep this in mind now.. Once you put this in there.. if you make any edits to the TOP part of that section instead of in the css box its not going to work correctly and you are going to keep getting that default style back. Its doing that to you because you are only changing the background color in that TOP section and not all the other parts - it doesnt know about the changes in the css in the bottom section. You cant switch back and forth between those two areas.

Code: [Select]

/* Normal, standard links. */
a:link
{
	color: #951B1B;
	text-decoration: none;
}
a:visited
{
	color: #951B1B;
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
	color: #000000;
	text-decoration: none;
}
a.nav:hover
{
	color: #cc3333;
	text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
	empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
	color: #000000;
	font-size: small;
	font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
	background-color: #FF9900;
	margin: 0px;
	padding: 12px 30px 4px 30px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
	color: #000000;
	font-family: verdana, sans-serif;
}
input, button
{
	font-size: 90%;
}

textarea
{
	font-size: 100%;
	color: #000000;
	font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
	font-size: 90%;
	font-weight: normal;
	color: #000000;
	font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
	height: 1px;
	border: 0;
	color: #666666;
	background-color: #666666;
}

/* No image should have a border when linked */
a img{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
	color: #000000;
	background-color: #ECD7D7;
	border: 1px solid #000000;
	margin: 1px;
	padding: 1px;
	font-size: x-small;
	line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
	color: #000000;
	background-color: #dddddd;
	font-family: "courier new", "times new roman", monospace;
	font-size: x-small;
	line-height: 1.3em;
	/* Put a nice border around it. */
	border: 1px solid #000000;
	margin: 1px auto 1px auto;
	padding: 1px;
	width: 99%;
	/* Don't wrap its contents, and show scrollbars. */
	white-space: nowrap;
	overflow: auto;
	/* Stop after about 24 lines, and just show a scrollbar. */
	max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
	color: #000000;
	text-decoration: none;
	font-style: normal;
	font-weight: bold;
	font-size: x-small;
	line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
	cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
	color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
	width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
	background-color: yellow;
	font-weight: bold;
	color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
	color: #000000;
	background-color: #F9F6F6;
}
.windowbg2
{
	color: #000000;
	background-color: #F8ECEC;
}
.windowbg3
{
	color: #000000;
	background-color: #F3E3E3;
}
/* the today container in calendar */
.calendar_today
{
	background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
	color: black;
	font-style: normal;
	background-color: #D11A25;
	background-image: url(http://www.smfboards.com/Themes2/red/images/titlebg.jpg);
	border-bottom: solid 1px #BA7777;
	border-top: solid 1px #FFFFFF;
	background-repeat: repeat-x;
	padding-left: 10px;
	padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
	font-weight: bold;
	color: black;
	font-style: normal;
}

.titlebg a:hover
{
	color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
	color: black;
	font-style: normal;
	text-decoration: underline;
}

.titlebg2 a:hover
{
	text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/catbg.jpg);
	background-color: #F32733;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/catbg2.jpg);
	background-color: #E82430;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
	border-bottom: solid 1px #792424;
	background-repeat: repeat-x;
}
.catbg, .catbg2
{
	font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
	font-size: 95%;
	color: white;
	text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
	color: white;
	text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
	color: #FFE0E0;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
	background-color: #ADADAD;
	padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
	padding: 1px;
	border: 1px solid #696969;
	background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
	font-size: x-small;
	font-family: verdana, sans-serif;
}
.middletext
{
	font-size: 90%;
}
.normaltext
{
	font-size: small;
}
.largetext
{
	font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
	width: 100%;
	overflow: auto;
	line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
	width: 100%;
	overflow: auto;
	padding-bottom: 3px;
	line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
	background-position: left bottom;
	color: white;
	text-transform: uppercase;
	vertical-align: top;

}
.maintab_back, .maintab_active_back
{
	color: white;
	text-decoration: none;
	font-size:  9px;
	vertical-align: top;
	padding: 2px 6px 6px 6px;
	font-family: tahoma, sans-serif;
}

.maintab_first
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_first.gif);
	background-repeat: no-repeat;
	width: 10px;
}
.maintab_back
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_back.gif);
	background-repeat: repeat-x;
}
.maintab_last
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_last.gif);
	background-repeat: no-repeat;
	width: 8px;
}
.maintab_active_first
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_active_first.gif);
	background-repeat: no-repeat;
	width: 6px;
}
.maintab_active_back
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_active_back.gif);
	background-repeat: repeat-x;
}
.maintab_active_last
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/maintab_active_last.gif);
	background-repeat: no-repeat;
	width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
	color: white;
	text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
	color: #FFE0E0;
	text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
	background-position: left top;
	color: white;
	text-transform: uppercase;
	vertical-align: top;

}
.mirrortab_back, .mirrortab_active_back
{
	color: white;
	text-decoration: none;
	font-size: 9px;
	vertical-align: bottom;
	padding: 6px 6px 2px 6px;
	font-family: tahoma, sans-serif;
}

.mirrortab_first
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_first.gif);
	background-repeat: no-repeat;
	width: 10px;
}
.mirrortab_back
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_back.gif);
	background-repeat: repeat-x;
}
.mirrortab_last
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_last.gif);
	background-repeat: no-repeat;
	width: 6px;
}

.mirrortab_active_first
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_active_first.gif);
	background-repeat: no-repeat;
	width: 6px;
}
.mirrortab_active_back
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_active_back.gif);
	background-repeat: repeat-x;
}
.mirrortab_active_last
{
	background-image: url(http://www.smfboards.com/Themes2/red/images/mirrortab_active_last.gif);
	background-repeat: no-repeat;
	width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
	color: white;
	text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
	color: #FFE0E0;
	text-decoration: none;
}

Subject / Started by	Replies	Last post
How do you change the images in your mange styles? Started by GreenCap General Support	4 Replies 1409 Views	June 16, 2006, 05:21:18 pm by GreenCap
Styles Problem Started by Crasy General Support	0 Replies 1301 Views	August 15, 2006, 07:34:46 pm by Crasy
Server 2 Styles Added Started by SMF For Free Announcements	0 Replies 2452 Views	December 11, 2006, 11:06:56 pm by SMF For Free
Styles/Themes Started by kronk General Support	4 Replies 1124 Views	February 05, 2007, 08:27:37 am by Skyfeather
Added 11 User Created Styles Started by SMF For Free Announcements	0 Replies 2883 Views	March 18, 2007, 04:40:13 pm by SMF For Free

SMF For Free Support Forum

News:

Author Topic: Help with styles (Read 4300 times)

JH

Help with styles

simply sibyl

Re: Help with styles

wizer

Re: Help with styles

simply sibyl

Re: Help with styles

wizer

Re: Help with styles

JH

Re: Help with styles

simply sibyl

Re: Help with styles

JH

Re: Help with styles

wizer

Re: Help with styles

simply sibyl

Re: Help with styles

JH

Re: Help with styles

simply sibyl

Re: Help with styles

wizer

Re: Help with styles

JH

Re: Help with styles

simply sibyl

Re: Help with styles

Related Topics