CSS 4 MP

Mar 8, '07 6:21 AM
by Maria for everyone

Category:

Other

How to remove / change the default icons - ALL THEMES

You can to remove the deafult icons you see in the site by using the code below.
Note that you can to subsitute the icons only for the two icons of wich I indicate the code, cause those only are in the CSS code;
the other icons are in the HTML code so it is possible only to hide them
If you want to add another icon then you have two way:

Inserting the icon like background-image, in a selector including the selector you're hiding;

/* Header */
.header .globalnav ul.gnopt img {
display: none;
}

or in equivalent manner

/* Header */
.header .globalnav li.gnopt img {
display: none;
}
.header .globalnav li.gnoptsel img {
display: none;
}

or in another equivalent manner

/* Header */
.header .globalnav li.gnopt a img {
display: none;
}
.header .globalnav li.gnoptsel a img {
display: none;
}

/* title boxes */
.itemboxsub .icon img {
display: none;
}

you can to insert a new icon in the main page by using in the Edit box the HTML code :
<img src="Icon_URL">
->Customize My Site -> Edit any box in the main page

but I prefer this way by using the css code :

/* remove the default icons */
.itemboxsub .icon img {
display: none;
}
/* add a new icon for all the title boxes (max width 24 px) */
.itemboxsub .icon {
background-color:tranparent;
background-image:url(Icon_URL);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
}

Note:
the max width you can to use in this space is the same as the original icons: 24 pixel.
More you can override the new icon and to use a custom icon for every box.
for Example:

/* remove the default icons */
.itemboxsub .icon img {
display: none;
}
/* add a new icon (max width 24 px) */
.itemboxsub .icon {
background-color:tranparent;
background-image:url(Icon_URL);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
}
/* this override the previous block for the box 2 */
#mainbox_2 .itemboxsub .icon {
background-attachment:scroll;
background-image:url(Icon_2_URL);
background-position:center;
background-repeat:no-repeat;
}
/* this override the previous block for the box 7 */
#mainbox_7 .itemboxsub .icon {
background-attachment:scroll;
background-image:url(Icon_7_URL);
background-position:center;
background-repeat:no-repeat;
}

Note:
it works cause the block for the box 2 and 7 come AFTER the block for all the icons.

/* Links inside boxes */
a.add, a.add:link, a.add:visited {
background: transparent none no-repeat scroll left top;
}

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

/* Links inside boxes, viewing history and miniprofile popup */
a.select, a.select:link, a.select:visited {
background : transparent none no-repeat scroll left top;
}

/* Links inside boxes, viewing history and miniprofile popup - Original Code */
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;
}

/* Links in contact and group pages */
.openbox .post img {
display: none;
}

Tags: css, default icons

Prev: changing reply boxes - ALL THEMES
Next: Modifying SKYLINE Theme

reply share

76 Comments

nonio wrote on Mar 8, '07, edited on Mar 8, '07

... three posts for making one good ,,, not bad
I'm sure next time I'll do better :D

puma1504 wrote on Mar 8, '07

how do u know all about that?
& what default icons ?

zyannadam wrote on Mar 8, '07

that is very neat.. ha ha.. mine is so messy..

simbioze2 wrote on Mar 8, '07

tip very good
thanks

nonio wrote on Mar 8, '07

puma1504 said

how do u know all about that?
& what default icons ?

I have modified the post .. so it is visible what are the icons =o)

I know this observing the code with some tool for looking the css code into the web pages
firefox has many of those tools

simbioze2 wrote on Mar 8, '07

I use an extension of the called Firefox Web to developer toolbar Very good

afterinfo wrote on Mar 12, '07, edited on Mar 12, '07

I USE This CSS Coding In My MP DEFAULT SITES & GROUPS
----------------------------------------------------------------

LI.gnopt A IMG {
DISPLAY: none;
}

.icon { visibility: hidden; display: none; }

a.select, a:link.select, a:visited.select {
background: none;
}
div.select {
background: none;
}

a.add, a:link.add, a:visited.add {
background: none;
}

Yet Again These work as far as I Know in all themes even the newone's.
BUT I Soley USE It in the DEFAULT MP Sites & groups & Have not tested it in any other theme myself.

afterinfo wrote on Mar 12, '07, edited on Mar 23, '07

I Just ADD The whole of that css coding stright to the very bottom of my CSS........... thats all

mariatv wrote on Mar 12, '07

tnx after
there are many manners for to make the same thing =o)

mariatv wrote on Mar 12, '07, edited on Mar 12, '07

good code .there isn't the contact and group page :)

I'm wondering for what do you use the
div.select {
background: none;
}

mariatv wrote on Mar 12, '07

wow this is very generic

.icon { visibility: hidden; display: none; }

afterinfo wrote on Mar 12, '07, edited on Mar 12, '07

Smiles is that good ?
Or Bad for everyone to know?

I Added it myself along with two other parts also within the coding.

works for me with trimmings - ( ^_^ )

Both parts are from a modify posting ages ago & if i,m not wrong they came via either MariaTv & Ifom with just the icon coding from me.

Comment deleted at the request of the author.

dcny27 wrote on Mar 24, '07

genius!! ^o^

kaedens wrote on Mar 24, '07

biggdaddi wrote on Mar 26, '07

Thanks for the tutorials...

musinglibertine wrote on Apr 15, '07

Is there a way to remove the icons and use your own?

nonio wrote on Apr 15, '07

read the dark part of the post

lendeil wrote on May 21, '07

this is exactly what i needed... ^__^
tenchie thanks! this is the best group im into...
it has lots of tutorials for begimmers like me..thanks!

lendeil wrote on May 21, '07

hey hey.. how about if i only want to change this images and not to remove it?? how's that?

homestaytag wrote on May 22, '07

hi I want to change the link title... that is, instead of the menu titles (reviews, blogs, photos, links, etc...) i want to change the wordings. for instance, instead of Photos, I want to call it Photo Gallery. Instead of Blogs, I want to call it something else..so on and so forth.

thanks.

Comment deleted at the request of the author.

nonio wrote on May 22, '07, edited on May 22, '07

lendeil said

hey hey.. how about if i only want to change this images and not to remove it?? how's that?

hi dear
it depends by what are the particular icons you are referring
it is explained in the post
some icon you can to change it;
some other you have to remove it and to use:
or the icons in the background image
or ( only in the title boxes ) html code by editing title box

mmhhhh this explaination sux
sure you have not understand ,,
tell me what icons in particular.

nonio wrote on May 22, '07

homestaytag said

the more simple thing is to edit the title :o)

it is simple ASCII text .

just click on
->Customize My Site ->edit the box you wanna edit ... insert the text in the TItle box

nonio wrote on May 22, '07

in the custom css the block controlling this part is
look in your custom.css (line 65)

.itemboxsub {
color:#000000;
font-family:tahoma;
font-weight:normal;
}

/*title box text size*/
.itemboxsub .cattitle {
font-size:18px;
}

nonio wrote on May 22, '07

you could add a background image into that
.itemboxsub {
color:#000000;
font-family:tahoma;
font-weight:normal;
background-image:url(here the URL of the bg image);
}

give a look to the avlack theme post.

homestaytag wrote on May 22, '07

now i'm all confused..please clarify. thanks again!

homestaytag wrote on May 22, '07

hi. when i click on 'customize site'. it only gives me three choices. pick a theme, css, page layout. where do i go from there?

nonio wrote on May 22, '07, edited on May 22, '07

hemmm when you have clicked the Customize My Site
ignore the yellow banner upper ..
you have to scroll down the page
every box has three links :
Move Hide Edit

just click the link: edit for every box you wanna change..
and type into the Title Box the title you want for the box you are editing.

xxkristianisafakexx wrote on May 29, '07

how do you replace the icon again? i'm interested in replacing the title box icons with my own ones. how can it be done?

anemrac wrote on Jun 23, '07

anybody could be my private tutor here? LOL

mft39 wrote on Jun 28, '07, edited on Jun 28, '07

afterinfo said

I Just ADD The whole of that css coding stright to the very bottom of my CSS........... thats all

It worked out just great but there the only icon remained is a little home in front of My Site

lfom wrote on Jun 29, '07, edited on Jun 29, '07

Now you have to add this also (it removes the My Site icon):

li.gnoptsel a img { display: none; }

besides this:
li.gnopt a img { display: none; }

in order to remove all the icons from the topbar.

nonio wrote on Jun 29, '07

ehhheh tnx Luiz ...
I'm wondering where is this new icon

lfom wrote on Jun 29, '07

You are welcome. Thank you for all the help and tutorials. It is good to find all the info in one place. ;)

nonio wrote on Jun 29, '07

:-)
yes .. it is possible to find the infos also if nobody want to reply

nonio wrote on Jun 29, '07

ahhaha I have found it ,,, tnx Luiz ...
uhmm another change to the code ..

it is hard to maintain this reference ...

nonio wrote on Jun 29, '07

I want the pay from MP ehehhe heh

nonio wrote on Jun 29, '07

tnx again Luiz
anyway I have found

.header .globalnav li.gnopt a img {
display: none;
}
.header .globalnav li.gnoptsel a img {
display: none;
}

is equivalent to

.header .globalnav ul.gnopt img {
display: none;
}

:-)

hollowsoul17 wrote on Jun 29, '07

they all worked for me^^!!!

hollowsoul17 wrote on Jun 29, '07

thanks to this i was able to change the colors of my links inside the boxes...etc..^^

tthihhan wrote on Jul 9, '07, edited on Jul 9, '07

I have already tried but cannot remove the icons in my photos section.

And i also tried this one: http://grouped.multiply.com/reviews/item/32
But It still shows the border (color#cccccc) there.

you can check these 2 problems on the same page, the link is: http://tthihhan.multiply.com/photos

Thanks
Thi Han

Comment deleted at the request of the author.

galgangza wrote on Aug 20, '07

The Good Job!!!
^_^ thx

badasscrawdaddy wrote on Nov 7, '07

Yes.. I am new to this and actually had it working . Just delet where it says (Icon url) add your own in between the parenthsis ( ) , but for some reason my background on my page vanished. Copy the code above and mod it.

queenmuffy wrote on Nov 8, '07

Just wondering how to replace the header icons with one I've picked out. I did for the item box icons, but not sure about the header icons....I don't see in the code where you would put the URL...

oliviamartinez2005 wrote on Nov 19, '07

Hi there... I would like to set the default icons of MP also de ones.... I have tried to disabled the ones that come with the theme... but Im getting crazy... HELP !!!! ... I understand that I have to disabled the ones of the theme and then active the MP ones... is ok?... I change in CSS and then in the edit boxes?... SOS !!!!!

nonio wrote on Nov 24, '07

queenmuffy said

Just wondering how to replace the header icons with one I've picked out. I did for the item box icons, but not sure about the header icons....I don't see in the code where you would put the URL.

you cant
the url is hard coded in the html page and we cannot change it
only we can to hide it via css
AFAIK you can to add an icon identical for ALL the links by using some background image

jeangriff14 wrote on Dec 4, '07

i am so new at this and tried the code to remove the default icons on comments guest book etc but every time i do when i next go to my page my background has dissapeared what am i doing wrong ? any chance of a nice easy answer lol thank you anyway in advance ...jean

nonio wrote on Dec 4, '07, edited on Dec 4, '07

it happens cause you are using the Custom theme as base theme (the one obtained from the custom theme tool) and not one of the customized themes

you have to follow the step 0 and step 1 of this post
http://grouped.multiply.com/reviews/item/16

look at this other post too
http://modify.multiply.com/notes/item/1608
she has the same identical problem

let me know if you have some problem

piscesamie wrote on Dec 6, '07

guys i tried this one but it didn't work when i try it in my group css codes does anybody know why? help

nonio wrote on Dec 6, '07, edited on Dec 6, '07

this one what????
there are 4 0r 5 different codes !

anyway I tested this in your site

/* Header */
.header .globalnav ul.gnopt img {
display: none;
}

and it works

specify what code u are referring!

and eventually leave the code in your css so it is possioble to erify the problem

you could get a syntax error

piscesamie wrote on Dec 6, '07

/* title boxes */
.itemboxsub .icon img {
display: none;
}

^^^^i mean that one i try this on my site but when i try to put the code on a group site it didn't work

nonio wrote on Dec 6, '07, edited on Dec 6, '07

ah ,,,
,,,
I tested it in this group one
and it works

the possibilities are:
a)you get a syntax error
b) the code doesnt work for that theme (improbable)
c)the code is changed in the last time only for the theme u are using in ur group (improbable)

if u want a more precisely reply I have to see the theme you hav problem
better your group casue I suppose u have a syntax error

janatz wrote on Dec 8, '07

is it possible to put the navigation bar on the right or left part of my page?

nonio wrote on Dec 8, '07

as vertical menu?

onlymissy wrote on Dec 11, '07

It works for me - I used the code to remove the item on the top page. I don't need to change them, I just want them gone. :-)
Thanks sooooo much, Maria!

Comment deleted.

pisko21 wrote on Jan 19

cheongalexis wrote on Feb 6

thanks for posting this. =)

nielli wrote on Feb 15

thanks, I am getting there...slowly. Ni (The Ancient One)

rachelorraine wrote on Feb 18

exactly what i need to know. thnx. :)

akminarrah wrote on Feb 25

thanx

kamillaloo wrote on Apr 27

is it possible to retain the icons but remove the text? for example the home icon still appears but the text is not. but it will link you to your home page. :)

kandaphati wrote on May 5

Thanks!

noreeeen wrote on May 6

thanks for posting :D

chiibisun wrote on May 14

nice :D

lhengbeh wrote on Jun 4

great!!! it helps me a lot... thanks

mitch93 wrote on Jun 25

Hey, how can i remove the icon MULTIPLY? The one with like 3 persons, located at the left side?

Comment deleted at the request of the author.

strandkorbtraum wrote on Jul 13

thanks for those codes, they all work fine (on my page).

just is there a way to remove the icons in the box on the right? where it displays teh pictures, name, stauts, and those links :
* Customize My Site
* Promote My Site
* My Media Locker
* My Contacts (12)
* My Groups (1)
* Photos of Me
* RSS Feed [?]
?

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