CSS 4 MP

Feb 17, '08 11:22 AM
by ♥ MarieL for everyone

how can i change the font size of those encircled words? is there any separate codes to that without affecting other font sizes?

Prev: changing the background color of a SPECIFIC BLOG ENTRY
Next: Guestbook

reply share

28 Comments

bindra wrote on Feb 17

Yes.

The first circle is using this code,

.replybox, .replyboxodd { font-size: 10px; }

while the second circle using normal code

.itembox { font-size: 10px; }

lfom wrote on Feb 17

Replies in your Guestbook and Links descriptions? You just need to find the correct identifier for these sections and add:

font-size: 14px;

or whatever size you want...

for example:

#home_guestbook .replybox, #home_guestbook .replyboxodd {
font-size: 14px;
}

bindra wrote on Feb 17

lfom said

and Links descriptions?

Yes, I believe Links description also using normal .itembox CSS tag.

lfom wrote on Feb 17

Yes, if in all boxes... If not, she must find out the descriptor of the one she wants to change first...

alogena wrote on Feb 17

for all the links (in all the boxes) in that position the code is

.itembox h4.item_link a { color:red; }

if u want to affect only that box the only code working is to introduce the mainbox_9

#mainbox_9 .itembox h4.item_link a { color:red; }

lfom wrote on Feb 17

Isn't te second circle the description of the post? Then I guess it's .itembox as Bindra said...

alogena wrote on Feb 17

it is a link
.itembox a

but it will affect all the links in itembox

alogena wrote on Feb 17

well the font-size works also using
.itembox
(not for the text colour)
but it will affect all the text in the item box in any case

so you could use this

.itembox h4.item_link {font-size:12px;}

but, being a link, its more correct to use this one

.itembox h4.item_link a { color:red;font-size:12px;}

marielski wrote on Feb 18

thanks alogena it worked, but i can't change the font size in my replybox, even i used the codes given by bindra and ifom.

alogena wrote on Feb 18

uh ...
normally that code is good ,,,

,,but in ur theme =)
....
uhm

well start removing two evident errors

1)
find this part of the code

ul.sidelist li.report {
display:none;
}
}
div.contentwrapper {
background: transparent;
}
div.bodywrap {
background: transparent;
}

and remove ONE of the two closed brackets after display none

2)

at the end u have this

::-moz-selection {
background: #fff;
color: #707070;
}

now ,, I dont know wht the function of this ,, but for sure
it is a proprietary css code of Firefox and others

for sure that code must begin with -moz.........
(- means a proprietary code moz means mozilla )

the right code should be

-moz-selection {
background: #fff;
color: #707070;
}

do u know the purpose of that code?

alogena wrote on Feb 18

at the moment the working code for the reply box is

table {
font-size:12px;
}

now ,, this is a bit strange ,, =)
table affect ALL the tables in the theme
that is almost all ... but normally in many places that code is overriden by other blocks more specific

for particularize that code to ur reply boxes u can to use

/* all the threads */
table .replybody {font-size:12px;}

/* guestbook */
table #home_guestbook .replybody {font-size:12px;}

hope it will work

alogena wrote on Feb 18, edited on Feb 19

about to explain this atypical behavior maybe it could be depend by the bunch of !important you have in the code

this iz my explanation about the !important

for a given property of a given block
as default the value assigned will be the last encountered in the code..

I mean
for example
if in ur code there is

...........
.itembox {
font-size:14px;
...
}
..........
.itembox {
font-size:9px;
...
}
....

the effective final value will be 9px

now u can to alter this natural sequential order by using !important

when u use !important .. that will be the final value for that property in that block ..
also if it isnt the last assigned value .

I mean

...........
.itembox {
font-size:14px !important;
...
}
..........
.itembox {
font-size:9px;
...
}
....

the final value will be 14 px ..

... now the important thing is
this !important will work ONLY IN THE MODERN BROWSERS

I will be more explicit ,,
it doesn't work in Internet explorer lesser then or equal to the version 6.

so this is normally used as a Internet explorer hack
for solving some specific problem you have in the layout of ie 6

so ..
it is not so frequent to use that

abusing of this could bring to some difference in the different browsers
cause its difficult to control that
[ its difficult without the !important too (= ]
with important you could get a value for ie different by the others browsers .. or, if you are lucky it does not make any change

The original purpose of !important feature it is for
to improve accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

and its really useful as ie hack

thats all bout !important

JUST a REAL EXAMPLE of the use of !important feature

/* hack min-height for IE lte6 */
height: auto !important; /* all modern browsers */
height: 50em; /* IE5.x e IE6 */
min-height: 50em; /* all modern browsers */

used for to simulate the min height in ie lte6

normally the box containing the content of the site is created with the DIV tag.
if u have a site with a variable length the final height will be given by the text into the box div
if in one page there isnt content ,, then the footer will come up ,, and it could go overlapping the lateral rail ( the menus)
to avoid this its normal to use something as

min-height:300px;

how to make this working in ie6 ???
simply by using the three lines of css code above;
ie doesnt know !important and doesnt know min-height

so ie will read
height: auto;
height: 50em;

at the end will be 50em (=800px)

more if the content exceed the 50em ,, ie will adapt automatically the height as a auto
and it doesnt happen in the other browsers =)
thats all for ie and in final it will work perfectly

the other browsers will read all the code
so the height will be auto (cause of the !important) with a minimal height of 50em
[till 50em it will work the min height; exceeding 50 em it will work the height auto ]

the second height:50 em is the value only for ie ,,,

well I stop here my f.. explanation
cause its coming a romance

alogena wrote on Feb 18, edited on Feb 18

hey ,, it appears does not exist a pure css ie hack for max-width ... sigh

marielski wrote on Feb 19

alogena said

-moz-selection {
background: #fff;
color: #707070;
}

this code is for the highlights.

marielski wrote on Feb 19

alogena said

thanks again alogena, it worked.. ^_^

diamme wrote on Feb 19

marielski said

-moz-selection {
background: #fff;
color: #707070;
}

this code is for the highlights.

which highlight? I put this code in..doesn't seem to affect anything.

alogena wrote on Feb 19, edited on Feb 19

.... hey mariel ,,
ehmm .,.,..
you have to re add the ::
I got a little error ... I must avoid to extemporize the replies =)

this is good

::-moz-selection {
background: #fff;
color: #707070;
}

http://www.quirksmode.org/css/selection.html

alogena wrote on Feb 19, edited on Feb 25

/* bg and text colours for highlighted (selected) text */

/* mozilla */
::-moz-selection {
background:#FF0000;
color:#000;
}
/* safari */
::selection {
background:#FF0000;
color:#000;
}

marielski wrote on Feb 19

thanks alogena.. ^_^

alogena wrote on Feb 19

tnx to you
there is a lot of stuff to uncover

yabee3 wrote on Feb 19

thanks
i have discovered lots of stuffs here.. ^_^

simplykenchi wrote on Feb 28

its not working on me, what i want to do is change the green ones in the avlack theme to the same color with my title boxes. this is my site: http://simplykenchi.multiply.com

alogena wrote on Feb 29

its not working what ?

Comment deleted at the request of the author.

simplykenchi wrote on Feb 29

the highlight that marielsky wants, but what I want is to change the green links in my site to a different color. I tried using the general links CSS but it messes up my navigational links. Any suggestions?

alogena wrote on Feb 29

look it works only in some browser

/* bg and text colours for highlighted (selected) text */

/* mozilla */
::-moz-selection {
background:#FF0000;
color:#000;
}
/* safari */
::selection {
background:#FF0000;
color:#000;
}

alogena wrote on Feb 29

simplykenchi said

to change the green links in my site to a different color.

a.select, a.select:link, a.select:visited {
background:transparent url(http://images.multiply.com/multiply/icons/clean/16x16/select.png) no-repeat scroll left top;
font-size:13px;
font-weight:bold;
height:16px;
padding-left:20px;
padding-top:1px;
color: pink;
}

simplykenchi wrote on Feb 29

thanks but it only worked on the view all links, I got pissed off so I just switched to a default theme but I'm keeping this though for future reference.

audio reply video reply

Add a Comment

grouped

CSS 4 MP

Join this Group!

Report Abuse

Create a New Account

Who is on Multiply?

Want to learn more?

Already a Member?

CSS 4 MP