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 questions

View previous topic View next topic Go down

CSS questions

Post by Flappypaddles on November 24th 2013, 2:11 pm

can anyone help me out with some info on CSS

I have thris in my template

[code]div.table-title h2, .table-title{
color: red;
font-weight: normal !important;
font-style: normal !important;
font-size:small!important
font-family:"Arial", "verdana","sans-serif";
}[/code]
which set the title of a section

however I would also like to set the color and font of the description of teh section as well

and it would be handy to find out what affects other areas as well

Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 24th 2013, 2:18 pm

Hello Flappypaddles,

This should modify the descriptions:
Code:
.forabg .topiclist .row div{
color:#f00;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS questions

Post by Flappypaddles on November 24th 2013, 5:18 pm

SethC1995 wrote:Hello Flappypaddles,

This should modify the descriptions:
Code:
.forabg .topiclist .row div{
color:#f00;
}
that works a treat
although now I would like to know how to change the appearance of the Last posts as well
and also how to change the position of the text so it flows around the pictures I use for each section
also how do I add a description for each bit of my css code so I know what it does when i come back to it


along the lines of

changes topic heading

changes description

etc etc

I presume there is some character that indicates that the line is not code

Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 24th 2013, 5:23 pm

This can be used to style the lastposts:
Code:
li.row dd.lastpost{
/*Properties here*/
}
Comments for CSS are entered as this: /*Comment*/

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS questions

Post by Flappypaddles on November 24th 2013, 6:33 pm

SethC1995 wrote:This can be used to style the lastposts:
Code:
li.row dd.lastpost{
/*Properties here*/
}
Comments for CSS are entered as this: /*Comment*/
and thanks again

I came across the float property when I was looking for clues online and rather liked the fact that you could make the first letter of a paragraph larger than the rest and cover several lines, however when I tried to add it to a forum description it sent the whole forum haywire

is there a way to use it in just teh description?
I realise the code is more HTML than CSS
but when I try to add the code to a sections description it just puts all the text on the left hand side of the page
Code:
<!DOCTYPE html>
<html>
<head>
<style>
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
</p>

</body>
</html>

Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 24th 2013, 6:39 pm

Well you could leave out the Doctype since its already declared, head, style, and body tags too.

You can use the paragraph tag, but we'll use this for our example:
Code:
<span class="First-Letter">T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
Above we gave the first letter in the span tags the class "First-Letter" That will allow us to style it specifically through our stylesheet.

Example:
Code:
.First-Letter{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
Doing this will allow us the change any text which are wrapped with span.First-Letter

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS questions

Post by Flappypaddles on November 24th 2013, 9:03 pm

SethC1995 wrote:Well you could leave out the Doctype since its already declared, head, style, and body tags too.

You can use the paragraph tag, but we'll use this for our example:
Code:
<span class="First-Letter">T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
Above we gave the first letter in the span tags the class "First-Letter" That will allow us to style it specifically through our stylesheet.

Example:
Code:
.First-Letter{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
Doing this will allow us the change any text which are wrapped with span.First-Letter

thanks again, however out of that came another question

I have some text I wish to place in small print

Code:
/* sets small print*/
 .small-print{
 font-size:75%;
 font-family:arial;
 line-height:100%;
  color= #000000
}

no problem with that at all, works like a dream, but I also want to position it a few cm's from the left margin

I added
Code:
margin-left:20%;
to the above code, but it only moved the first line of text to the right, any further lines were positioned on the left of the page

so I added this

Code:
/* sets margin*/
 .set-margin{
 margin-left:20%;
}
and

Code:
<span class="set-margin">this is my text.<br> it has more than one line</span>
to my section description

but unless I add

Code:
<span class="set-margin">this is my text.<br> <span class="set-margin">it has more than one line</span>
to each new line of text it does not put the whole thing x% to the right

I thought a margin would put all text to a set position even if it ran to more than one line.

Perhaps there is another command I should be using?

Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 25th 2013, 7:35 am

Wrap your content with the paragraph tag(<p>) and give it your margin class. It is a block level element like <div>. The block will move while the content inside stays relative to the element position.

Span is inline, and is mainly used to add a hook to something without adding any visual change by itself.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS questions

Post by Flappypaddles on November 26th 2013, 12:03 am

SethC1995 wrote:Wrap your content with the paragraph tag(<p>) and give it your margin class. It is a block level element like <div>. The block will move while the content inside stays relative to the element position.

Span is inline, and is mainly used to add a hook to something without adding any visual change by itself.
thanks it has been very helpful

is there a css tutorial anywhere which highlights all the various different sections and elements of the forum?


Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 26th 2013, 9:05 am


Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: CSS questions

Post by Flappypaddles on November 26th 2013, 11:54 am

SethC1995 wrote:I remember there was this thread for phpbb3:
http://help.forumotion.com/t55167-css-codes-for-customizing-phpbb3-forums
thanks again I guess this can be closed now. You have been brilliant

Flappypaddles
Forumember

Posts : 249
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

Re: CSS questions

Post by Ange Tuteur on November 26th 2013, 12:03 pm

No problem I love you

Topic Solved and Archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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