CSS? What?

[Skidjit]

About a week ago, I had someone try to tell me what this is. I know it has to do with information and coding and something about my OWN computer.

I'm finding many plugins seem to need to have some sort of prior knowledge of CSS in order to even use them. I'm feeling left out since I can't seem to be able to grasp how to do these CSS edits.

Someone gave me a link to an online class on how to learn all about this. Later on, I do plan to spend some time there. It was just a bit overwhelming when I took a peek.

I know I'm asking a lot. For now, could someone help me understand by giving me a simple CSS run through? (If there IS such a thing. LOL!) I really want to use these plugins in a cool way that they were intended. It almost makes the old v4 way of using codes in headers and footers look simple.

I feel so embarrassed, but at the same time, I'm excited at all I'm seeing is possible once I get the hang of this. I'm raring to go!  

[RedBassett]

It may be hard to give a brief run through from scratch, but can you give us an example of what you want to do?

[Skidjit]

Well, it seems like every time I turn around I keep finding cool plugins that seem to need CSS edits. I read the threads where I would download them and it's all greek to me. So there is more than one plugin that I'm being stumped with.

My current one is the sidebar redux. I've never tried to do a sidebar on my site. I'm willing to try do something different. So this is just ONE of many CSS things.


I'm in over my head aren't I?

[♥ ℒʊ√ ♥]

Have you imported the side bar plug-in, skidjit?

Once you do, you'll see there isn't too much to fill in. And there are bubbles that will give you an explanation for the process.

And the content containers can be as simple or complicated as you want them to be.

Simple HTML works in the content area.

Don't be afraid to import them and play around with them.

No mistake is fatal. Someone here is always ready to help. 

I know very little about CSS but with support's help when I need it, it's very do-able.

[Maiden]

Hi Skidjit,

I was where you are now when I started V5 I think. I had no idea what CSS was and my knowledge of html was you build webpages with it and I can make a table in it sort of like I make a table in a post.

Now I can gleefully use CSS (not always right first time lol) and manipulate the html in the layout templates to achieve what I want (most of the time anyway haha)

Most plugins (I think all of the ones I've used) don't need CSS edits to function, it's only to make them look pretty.

This is the way I think about it is: CSS is the decoration. It's theme specific (each theme has it's own stylesheet in the ACP - it's not anything to do with YOUR computer) and it tells the browsers (there can be problems with some things on some browser, but that's beyond me) how to make all the bits of the page look.

So Using your sidebar as an example.

Download Brian's plugin
support.proboards.com/thread/440272/plugin-sidebar-redux-1-3

Upload it to your forum and fill in the fields required to enable it. Enable it. And you should see the sidebars. (No CSS edits required).

However it might not look like how you want.

This is a nice one to start with because Brian has made it easy to work out what to edit.

If you want to change the look of your sidebars give them a custom id (it can't be an id used by anything else on the page so I think I went for something like sidebar-cbox-box which I'm pretty certain wont' be used by proboards or another plugin lol.) which is the plugin settings itself.

Now you need to move to the style sheet of the theme you want to change the look on

Themes > Advanced Styles and CSS > Stylesheet

Add your CSS at the bottom.

e.g.

/*Sidebar formatting stuff*/

.sidebarr-main .content-box {
   border-color: @container_outer_border_color;
}


#cbox_rules {
   border: 1px solid #000; .rounded-corners(5px);
   padding: 5px 5px 5px 10px;
   font-size: 0.8em;
}


#cbox > .content-box {
margin-top: 10px;
}



Is all the stuff I'm using to make mine look the way I want: solariaweyr.proboards.com/
(So it turns out I was wrong about naming my containers my Content Box 'ID' is 'cbox' and then ''cbox_rules' is the id of a div I have put in the Content section of the Content Box itself)

[Skidjit]

Apr 11, 2013 22:04:09 GMT -8 ♥ ℒʊ√ ♥ said:

Have you imported the side bar plug-in, skidjit?

Once you do, you'll see there isn't too much to fill in. And there are bubbles that will give you an explanation for the process.

And the content containers can be as simple or complicated as you want them to be.

Simple HTML works in the content area.

Don't be afraid to import them and play around with them.

No mistake is fatal. Someone here is always ready to help. 

I know very little about CSS but with support's help when I need it, it's very do-able.

Yes I did Brian's sidebar Redux. I was doing as you said, to click on the options that is prompted me to. I did see it pop up on my site as well. So I know something's working. I was not sure what I was going to put in there, after all this is just me experimenting to see what will be available to me. I don't have a chatbox, not on this site. (I have another site I might put one in, but I'm not in any hurry.) Still, I thought about using that to be quick links. They don't work, so I'm not doing something right. It was about 2am last night, when I finally found the style section. I saw all of those codes and was scared to touch it, for fear I'd mess up my site somehow. I guess I need a little more info from support before I attemt to edit anything there. Still, thanks for the comment. It makes me feel a little better about taking another step in all of this. Oh and Brian's already helped me out a lot. He's good. Thanks.

[Skidjit]

Apr 12, 2013 0:55:05 GMT -8 Maiden said:

Hi Skidjit,

I was where you are now when I started V5 I think. I had no idea what CSS was and my knowledge of html was you build webpages with it and I can make a table in it sort of like I make a table in a post.

Now I can gleefully use CSS (not always right first time lol) and manipulate the html in the layout templates to achieve what I want (most of the time anyway haha)

Most plugins (I think all of the ones I've used) don't need CSS edits to function, it's only to make them look pretty.

This is the way I think about it is: CSS is the decoration. It's theme specific (each theme has it's own stylesheet in the ACP - it's not anything to do with YOUR computer) and it tells the browsers (there can be problems with some things on some browser, but that's beyond me) how to make all the bits of the page look.

So Using your sidebar as an example.

Download Brian's plugin
support.proboards.com/thread/440272/plugin-sidebar-redux-1-3

Upload it to your forum and fill in the fields required to enable it. Enable it. And you should see the sidebars. (No CSS edits required).

However it might not look like how you want.

This is a nice one to start with because Brian has made it easy to work out what to edit.

If you want to change the look of your sidebars give them a custom id (it can't be an id used by anything else on the page so I think I went for something like sidebar-cbox-box which I'm pretty certain wont' be used by proboards or another plugin lol.) which is the plugin settings itself.

Now you need to move to the style sheet of the theme you want to change the look on

Themes > Advanced Styles and CSS > Stylesheet

Add your CSS at the bottom.

e.g.

/*Sidebar formatting stuff*/

.sidebarr-main .content-box {
   border-color: @container_outer_border_color;
}


#cbox_rules {
   border: 1px solid #000; .rounded-corners(5px);
   padding: 5px 5px 5px 10px;
   font-size: 0.8em;
}


#cbox > .content-box {
margin-top: 10px;
}



Is all the stuff I'm using to make mine look the way I want: solariaweyr.proboards.com/
(So it turns out I was wrong about naming my containers my Content Box 'ID' is 'cbox' and then ''cbox_rules' is the id of a div I have put in the Content section of the Content Box itself)

Wow. It helps to know I'm not alone starting out not understanding any of this. Then to see you've come this far. Cool. It gives me hope. The things you mentioned are the things I'm wanting to do.... "the decoration.. theme specific." It was the stylesheet where I froze. Basically, I don't know how to customize using a CSS code of my own. Clueless in fact.

I do know that once I put up this sidebar, my wallpapers all dissappeared. I figure that will be something Brian could tell me how to get around, if possible.

Thanks also for telling me about the id. I kind of thought that might have been what he was talking about but was not sure.

SO. Since you started just about where I'm at right now. My question... how did you know what information (or the code you must have personalized) to put in your stylesheet? It's what you put in your little box on this post that sadly, I'm clueless about.

[♥ ℒʊ√ ♥]

You will do fine, skidjit. I felt the same way just a short month ago. I was sure I'd hate v5 and didn't believe anyone when they said once learned, it's easier than v4.

v5 comes with a shout box. It can be relocated. Mine is in the hidden peekaboo sidebar that's accessed thorugh the "Click" image. live-learn-luv.boards.net/

Brian's sidebar is fantastic and it is a great place to start.

As far as putting in code, you can see if you've done something wrong in the display of your board in the Visual editor. It will also put up a warning message in red at the bottom of the editor letting you know which line has an error code. If you don't hit "save" and you've done something wrong and can't figure out what ~ just leave the page. It will reset back to the way it was as long as you don't hit "save". 

[Skidjit]

OK. Thank you so much. Having that message pop like that will be good for me. Whew.

Is there a place to get the CSS codes to put in there? Wait, That was the stuff in his first post right?

*rolleyes at myself*

THANKS. I'm going to go tinker around again for a while.

[Shrike]

For a basic understanding of CSS, there are multiple guides you can find on the internet but I'd recommend this one by Dev.Opera as the initial introduction is very easy to get to grips with. Even if you don't end up using CSS code itself, you'll find it easier to understand what things do in places like the Visual Editor.

From there, the best way to find things out is to simply experiment. The first thing to do is to find the "developer tools" in your browser. The easiest way is to right click on part of the page and then there should be an option like "Inspect Element". This will look similar to this screenshot (this is Chrome's). The list of properties on the side shows what effects are being applied. You can toggle these on/off and see what they do that way. If you're not sure what part of the forum is called, use the inspect element tool and find out. If you're not sure what a property does, look it up.

Hopefully that helps somewhat.

PS. I couldn't think of how use it in an explanation, here is a neat 3D view of the structure of the forum. I won't lie, I was playing with this for ages when I discovered it just now.

[Maiden]

I started off with basic stuff like this, on a duplicate theme so my old theme was safe.

I went about it like this.

Worked out how stuff had to be laid out:

#ID {
property name: the stuff that makes it look right;
}

or

#ID {property name: the stuff that makes it look right;}

is fine as well but I don't like scrolling left and right when you add multiple properties so I use the first. Most of the style sheet is laid out in the second, with things grouped under headers of what they do. (/*anything in here does nothing and is just a note*/ - useful if you want to try taking something away without deleting it.

Working out the ID's is one bit as Shrike says, right click inspect element was how I worked this out for things I didn't set the ID for, and th you can either add to the bottom of the stylesheet or use ctrl+f to find where it exists in the stylesheet already and modify there. Sometimes things don't work if you add them at the bottom or only change one thing and then I tend to come here and ask for help which can lead to things like this:

#cbox > .content-box

Or someone telling me too change two things in the main stylesheet.

Now for the properties and attributes I started by using google. 'CSS font size' and it'd toss up a webpage that told me the right property to use 'font-size' and possible values, eg. 10pt, 1em, etc. Repeat for anything else I was curious about and then try it and see what happened.

I'm not saying this is the right way to do, just how I did it seeing as we seem to have started in the same place. As Shrike said it's also really useful now because you can use this stuff in post. e.g.

[table style="INSERT CSS HERE"]rest of table code to make pretty things.

P.S. That 3D view of the forum is pretty awesome.

[Skidjit]

Shrike and Maiden,

Thanks. This is a lot to soak in but I really think it finally is. I have a lot to experiment with. I'm also one who grasps things better visually. That was cool Shrike. Thanks for all of that useful information. Maiden, thanks for explaining the code. The other plugin I was having difficulties with was the Google Font one. I gave that up days ago. Now, I can try again.

I'm bookmarking this thread for refrence.