CSS Question

Hello there, 

Being new at this, I was looking around in my Admin panel and was wondering where to go to change the theme with a CSS code? I see where you can pick skins pre-made. 

Thanks in advance! 

Hello lilrebelscum,
Welcome to Forumotion, glad to see you chose us for your forum software. To answer your question on where to find the CSS section in your Admin Panel, just follow the steps described below.

Access Administration Panel -> Click Display Tab -> Click "Colors" under Pictures & Colors -> Click on the CSS Tab next to the Colors Tab.

There you go! That will get you to your CSS Page to add codes to change the colors of elements all around your forum.

Hope this helps answer your question. If you need any more help, let me know!

-James

Jadster wrote:Hello lilrebelscum,
Welcome to Forumotion, glad to see you chose us for your forum software. To answer your question on where to find the CSS section in your Admin Panel, just follow the steps described below.

Access Administration Panel -> Click Display Tab -> Click "Colors" under Pictures & Colors -> Click on the CSS Tab next to the Colors Tab.

There you go! That will get you to your CSS Page to add codes to change the colors of elements all around your forum.

Hope this helps answer your question. If you need any more help, let me know!

-James

Hello Jadster! 

Thanks for the quick reply. 

I see where you can change the body of the CSS but what about the header and footer? I have code for that too.

Hello again lilrebelscum,
The CSS Page that I have linked you to is for all types of CSS codes. Be it header, body, footer, ect. Just simply enter the code for it. If you need any hep with changing your code(s) to work properly then let me know and I will help you out!

Hope to hear from you soon.

-James

Jadster wrote:Hello lilrebelscum,
Welcome to Forumotion, glad to see you chose us for your forum software. To answer your question on where to find the CSS section in your Admin Panel, just follow the steps described below.

Access Administration Panel -> Click Display Tab -> Click "Colors" under Pictures & Colors -> Click on the CSS Tab next to the Colors Tab.

There you go! That will get you to your CSS Page to add codes to change the colors of elements all around your forum.

Hope this helps answer your question. If you need any more help, let me know!

-James

Jadster, 

Thanks for the heads up.  One more question, For setting up side bars and all those kinda good things, is there a widget section?

lilrebelscum wrote:Jadster, 

Thanks for the heads up.  One more question, For setting up side bars and all those kinda good things, is there a widget section?

Yes, there is. Go to Modules and then you will see a "Portal & Widgets" section.

LilRebelScum,
Yes indeed there is a widget section. To locate & turn on the widgets, just follow the steps below.

Open Administration Panel -> Click the Modules Tab -> Click "Forum Widgets Management" under Portal & Widgets -> Set "Display forum widgets:" to YES -> Set the minimum width of "180" to either the right or left side -> Click Save!

To add widgets to the side you want, just scroll down to the bottom and find the widget you want to add, click and drag it to the designated side on the layout right above the box of widgets.

You can also have personal widgets and custom made ones done here as well. You can put space in between widgets & columns in this page as well. For more information and tutorials on Forumotion widgets, just refer to the links below.

https://help.forumotion.com/t137398-personalize-forum-widgets-with-css#928342
https://help.forumotion.com/t61210-list-of-tricks-tips (Scroll down to the Widgets Section)

Hope this helps!

-James

Jadster wrote:LilRebelScum,
Yes indeed there is a widget section. To locate & turn on the widgets, just follow the steps below.

Open Administration Panel -> Click the Modules Tab -> Click "Forum Widgets Management" under Portal & Widgets -> Set "Display forum widgets:" to YES -> Set the minimum width of "180" to either the right or left side -> Click Save!

To add widgets to the side you want, just scroll down to the bottom and find the widget you want to add, click and drag it to the designated side on the layout right above the box of widgets.

You can also have personal widgets and custom made ones done here as well. You can put space in between widgets & columns in this page as well. For more information and tutorials on Forumotion widgets, just refer to the links below.

https://help.forumotion.com/t137398-personalize-forum-widgets-with-css#928342
https://help.forumotion.com/t61210-list-of-tricks-tips (Scroll down to the Widgets Section)

Hope this helps!

-James

Jadster, 

Thanks for the information! I'm not sure what I'm doing wrong. It's not letting me edit much and I can't seem to get the uploaded background link to work. I reset the theme to a basic one, but I think I'm missing something.. Oy Vey.

LilRebelScum,
Could you provide your code that you are using by putting it in the

Code:

bbcode so that I can see what might be wrong. Also, could you link me to your forum so I can have a first hand look at what it looks like or is missing.

-James

Jadster wrote:LilRebelScum,
Could you provide your code that you are using by putting it in the bbcode so that I can see what might be wrong. Also, could you link me to your forum so I can have a first hand look at what it looks like or is missing.

-James

http://legaciesoftheforce.forumotion.com/forum - That's the website. 

http://support.zathyus.com/topic/5046620/1/ - That's the code I was trying to use. And I had uploaded the background I had wanted for the site and it doesn't seem to take.

I have edited the code slightly so add this to your CSS and see what it does.

Code:

.html { overflow-x: hidden; overflow-y: auto; }

.form { display:inline; }
.img  { vertical-align:middle; border:0px }
.BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 9px; color: #858585; margin:0px 10px 0px 10px; background-color:#1A1A1A;  }
.TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #858585; }
.a:link, a:visited, a:active { text-decoration: none; color: #FFF; }
.a:hover { color: #E8E8E8; text-decoration:underline }

.fieldset.search { padding:6px; line-height:150% }
.label { cursor:pointer; }

div.tableborder div.tablepad { background-color: #292929!important; }
div.tableborder div.tablepad  table { background-color: #252525!important; border-top:1px solid #1A1A1A;border-left:1px solid #1A1A1A;border-bottom:1px solid #424242;border-right:1px solid #424242; }
div.tableborder div.tablepad input { background-image: url(http://i5.ifrm.com/3842/136/upload/p436018.gif); background-color:#373737!important;background-position:center; background-repeat:no-repeat;border:1px solid #1A1A1A; color: #FFF; }

img.attach { border-top:5px solid #151515; border-bottom:5px solid #151515;border-left:2px solid #151515 ; border-right:2px solid #151515;padding:4px }

.googleroot  { padding:6px; line-height:130% }
.googleparent { padding:6px; margin-left:30px; line-height:130%; color:#174944 }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#E8E8E8 }
.caldate  { text-align:right;font-weight:bold;font-size:10px;color:#E8E8E8; background-color:#202020;padding:2px; margin:0px;border-bottom:1px solid #1A1A1A; }

.warngood { color:green }
.warnbad  { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg  { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; border:3px double #1A1A1A;background-color: #2A2A2A }
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #2A2A2A; border:3px double #1A1A1A;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #1A1A1A;background-color:#2A2A2A; background-image: url(http://i5.ifrm.com/3842/136/upload/p669990.gif); padding:0px;margin:0px; }
#submenu  { display:none }
#submenu a:hover { color:#E1E6EA;text-decoration:none;border-top: 1px solid #2D3644;border-bottom:3px solid #2D3644;border-left:2px solid #2D3644;border-right:2px solid #2D3644; background-image: url(http://i5.ifrm.com/3794/124/upload/p14328.gif); background-repeat:no-repeat;background-position:center;padding:1px; }
#userlinks { border-top:1px solid #1A1A1A;border-left:1px solid #1A1A1A;border-bottom:1px solid #424242;border-right:1px solid #424242;background-color:#252525; }

#navstrip  { border-top:1px solid #1A1A1A;border-left:1px solid #1A1A1A;border-bottom:1px solid #424242;border-right:1px solid #424242;background-color:#252525;font-weight:bold;padding:4px 2px 4px 2px; }

.activeuserstrip { border-top:1px solid #1A1A1A;border-bottom:1px solid #0A1414;border-right:1px solid #1A1A1A;border-left:1px solid #1A1A1A; background-image: url(http://i5.ifrm.com/3842/136/upload/p432362.gif); background-position:center; padding:3px }

.pformstrip { font-family: Arial, Verdana, Tahoma, sans-serif;background-image: url(http://i5.ifrm.com/3842/136/upload/p423069.gif); color:#C7C7C7;font-weight:bold;padding:4px;margin-top:1px }
.pformleft  { background-color: #2A2A2A; padding:6px; margin-top:1px;width:25%; border-top:1px solid #1A1A1A; border-right:1px solid #1A1A1A;border-left:1px solid #1A1A1A; }
.pformleftw { background-color: #2A2A2A; padding:6px; margin-top:1px;width:40%; border-top:1px solid #1A1A1A; border-right:1px solid #1A1A1A; }
.pformright { background-color: #2A2A2A; padding:6px; margin-top:1px;border-top:1px solid #1A1A1A;border-right:1px solid #1A1A1A; }

.post1 { background-color: #232323;border-top:1px solid #424242;border-right:1px solid #424242 }
.post2 { background-color: #232323;border-top:1px solid #424242;border-right:1px solid #424242 }
.post1 table { background-image: url(http://i5.ifrm.com/3842/136/upload/p432362.gif); background-color: #373737; border: 1px solid #0A1414; background-repeat: repeat-x; padding: 1px; text-align:left; }
.post2 table { background-image: url(http://i5.ifrm.com/3842/136/upload/p432362.gif); background-color: #373737; border: 1px solid #0A1414; background-repeat: repeat-x; padding: 1px; text-align:left; }
.postlinksbar { background-image: url(http://i5.ifrm.com/3842/136/upload/p423069.gif); padding:4px;margin-top:1px;font-size:10px;border-right:1px solid #1A1A1A;border-left:1px solid #1A1A1A; }

.row1 { background-color: #2A2A2A;border-top:1px solid #424242;border-right:1px solid #424242 }
.row2 { background-color: #2A2A2A;border-top:1px solid #424242;border-right:1px solid #424242 }
.row3 { background-color: #2A2A2A;border-top:1px solid #424242;border-right:1px solid #424242 }
.row4 { background-color: #2A2A2A;border-top:1px solid #424242;border-right:1px solid #424242 }

.darkrow1 { background-color: #242424; color:#858585; border-top:1px solid #3B3B3B; }
.darkrow2 { background-image: url(http://i5.ifrm.com/3842/136/upload/p432362.gif); background-position:center; padding:2px;border-bottom:1px solid #3C3C3C; color:#858585; }
.darkrow3 { background-color: #2A2A2A; color:#858585; }

.hlight { background-color: #444444 }
.dlight { background-color: #2A2A2A }

.titlemedium { font-family: Arial, Verdana, Tahoma, sans-serif;font-weight:bold; color:#C7C7C7; padding:4px; margin:0px; background-image: url(http://i5.ifrm.com/3842/136/upload/p423069.gif);border-right:1px solid #424242; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #C7C7C7 }

.maintitle { text-align:center;font-family: Arial, Verdana, Tahoma, sans-serif;vertical-align:middle;font-weight:bold; color:#FFF; letter-spacing:1px; padding:7px 0px 7px 5px; background-image: url(http://i5.ifrm.com/3842/136/upload/p167129.gif); background-position:center; border-right:1px solid #161616;border-left:1px solid #161616;border-top:1px solid #161616 }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }

.plainborder { border:1px solid #5F5F5F;background-color:#161616; }
.tableborder { border:1px solid #585858;background-color:#1A1A1A; padding:0px; margin:0px; width:100% }
.tablefill  { border:3px double #1A1A1A;background-color:#373737;padding:6px;  }
.tablepad    { background-color:#2A2A2A;border:1px solid #1A1A1A;padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
form div.tableborder td.row1 { background-color: #1E1E1E; border: 1px solid #424242!important; }

div.row4 { border:1px solid #1A1A1A!important;background-color:#202020;padding: 0px 2px 0px 2px; }
div.darkrow3 { background-color: transparent; border-top: 0px solid #1A1A1A; }

.wrapmini    { background-color:#242424; float:left;line-height:1.5em;width:25% }
.pagelinks  { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#4F4F4F }
.edit { font-size: 9px; color:#4F4F4F }

.signature  { font-size: 10px; color: #858585 }
.postdetails { font-size: 10px }
.postcolor  { font-size: 11px; line-height: 160% }

.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px;C:Z00 }
.unreg { font-size: 10px; font-weight: normal; color: #C7C7C7 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 10px; color: #858585; background-color: #2E2E2E; background-image: url(http://i5.ifrm.com/3842/136/upload/p675338.gif); background-repeat: repeat-x;border-top:4px double #151515; border-bottom:5px solid #151515;border-left:2px solid #151515 ; border-right:2px solid #151515; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #858585; background-color: #2E2E2E; background-image: url(http://i5.ifrm.com/3842/136/upload/p675338.gif); background-repeat: repeat-x;border-top:3px double #151515; border-bottom:5px solid #151515;border-left:2px solid #151515 ; border-right:2px solid #151515; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

</style><center>Skin <b>Aphotic</b> designed by <b>Zeus00</b> of the <b><a href="http://invisionfree.com/forums/ifskinzone/index.php" target="_blank">IF Skin Zone</a></b>.</center><style type='text/css'>

.codebuttons  { font-size: 10px; color:#858585; font-family: verdana, helvetica, sans-serif; vertical-align: middle;background-color:#383838; background-image: url(http://i5.ifrm.com/3842/136/upload/p423069.gif);border:1px solid #1A1A1A; }
.forminput, .radiobutton, .checkbox  { border:1px solid #1A1A1A; color: #FFF;background-image: url(http://i5.ifrm.com/3842/136/upload/p436018.gif); background-color:#373737;background-position:center; background-repeat:no-repeat; font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.textinput {  border: 1px solid #1A1A1A;background-color:#373737; font-size: 10px; color:#FFFFFF; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.thin { padding:4px 2px 4px 2px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #1A1A1A;border-left:1px solid #1A1A1A;border-bottom:1px solid #424242;border-right:1px solid #424242;background-color:#252525; }

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue  { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

Anything with these "<>" around it isn't CSS code. That is for HTML or Javascript if it has the word Script in those brackets. The only code that goes into CSS will have either a "." or "#" and then have text for either the class or id. Elements such as background color, boarder, text-align should all be in {} brackets.

Hope this helps!

-James