The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS Question

View previous topic View next topic Go down

CSS Question

Post by lilrebelscum on January 9th 2015, 5:25 pm

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! Very Happy

lilrebelscum
New Member

Posts : 5
Reputation : 1
Language : English

http://legaciesoftheforce.forumotion.com

Back to top Go down

Re: CSS Question

Post by Jadster on January 9th 2015, 5:42 pm

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
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Question

Post by lilrebelscum on January 9th 2015, 5:51 pm

@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. Smile

lilrebelscum
New Member

Posts : 5
Reputation : 1
Language : English

http://legaciesoftheforce.forumotion.com

Back to top Go down

Re: CSS Question

Post by Jadster on January 9th 2015, 5:53 pm

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
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Question

Post by lilrebelscum on January 9th 2015, 6:21 pm

@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. SmileOne more question, For setting up side bars and all those kinda good things, is there a widget section?

lilrebelscum
New Member

Posts : 5
Reputation : 1
Language : English

http://legaciesoftheforce.forumotion.com

Back to top Go down

Re: CSS Question

Post by Klemen on January 9th 2015, 6:31 pm

@lilrebelscum wrote:Jadster,

Thanks for the heads up. SmileOne 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.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: CSS Question

Post by Jadster on January 9th 2015, 6:32 pm

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.

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

Hope this helps!

-James

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Question

Post by lilrebelscum on January 9th 2015, 6:55 pm

@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.

http://help.forumotion.com/t137398-personalize-forum-widgets-with-css#928342
http://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
New Member

Posts : 5
Reputation : 1
Language : English

http://legaciesoftheforce.forumotion.com

Back to top Go down

Re: CSS Question

Post by Jadster on January 9th 2015, 7:03 pm

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
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: CSS Question

Post by lilrebelscum on January 9th 2015, 7:09 pm

@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.

lilrebelscum
New Member

Posts : 5
Reputation : 1
Language : English

http://legaciesoftheforce.forumotion.com

Back to top Go down

Re: CSS Question

Post by Jadster on January 9th 2015, 7:15 pm

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

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum