Community Central
Register
Community Central
Forums: Index Support Requests Adding CSS classes
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Archive
Note: This topic has been unedited for 4393 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.


Heading

How can I make a heading 2 with a background image of http://images2.wikia.nocookie.net/__cb20111209055428/isleoftune/images/4/4e/Don%27t_Stop_Believing.png using CSS to add to MediaWiki:Wikia.css in Isle of Tune Wiki? Though the file is very large, is it possible to crop it without uploading a new one? Also, I would like it to have those features:

  • Height: 30px
  • Width: 100%
  • Border Radius: 7px


If anyone has an idea to what this can be like, then please contact me on my talk page Sam Wang 20:43, December 27, 2011

Adding something like:
.WikiaArticle h2 {background: url("http://images2.wikia.nocookie.net/__cb20111209055428/isleoftune/images/4/4e/Don%27t_Stop_Believing.png")}
would do the job. Although personally I think it looks unreadable. Also, nice sig ;D Sovq 12:58, December 27, 2011 (UTC)
Thanks! I've basically used your signature but changed the link Sam Wang 09:15, December 28, 2011
As you've said, this seems unreadable, and I do think this as well. So is there anyway to get rid of that grey line across and change it into http://images.wikia.com/communitytest/images/7/7f/Blueheader.png? Sam Wang 15:32, December 28, 2011

(Reset indent) Somehow I didn't notice these additional styles you wanted. This is how you add additional styles:

.WikiaArticle h2 {
background: url("http://images.wikia.com/communitytest/images/7/7f/Blueheader.png") repeat-y;
height:30px;
width:100%;
border-radius: 7px;
border-bottom: none;
}

If you wanted to change the border to the image, instead of the header, the you might want to use the border-image property, although it's not supported by all browsers yet and somewhat difficult to properly configure. Sovq 07:44, December 28, 2011 (UTC)

But now the problem is that I need a left margin because now it is too far to the left, so how should it look like? Also, the top margin is shorter than the bottom margin somehow, so what should the CSS look like? Luckily, Google Chrome is the major browser I use, so it can be supported. Also, why does the grey line still appear in the pages as a heading 2? Sam Wang 18:51, December 28, 2011
.WikiaArticle h2 {
background: url("http://images.wikia.com/communitytest/images/7/7f/Blueheader.png") repeat-y;
width:100%;
border-radius: 7px;
border-bottom: none;
padding-left:10px;
}
This looks decent enough to me. Here you can find all the supported styles. Try it out and see which combinations of custom styles looks best for you :) Sovq 12:34, December 28, 2011 (UTC)
Thanks so much! Can you please check the Forum:Adding CSS classes#Hoverimage because I've still got a question Sam Wang 20:01, December 29, 2011

Hoverimage

I've used the hoverimage class Sovq gave me, but that is not really the style I want. The style that I really want is like the something photos on this wiki module because it turns dark in the real picture part instead of the background and that is the style I like, so how should I do with the CSS? Sam Wang 18:51, December 28, 2011

Wiki-wordmark CSS

How should I make the Wiki-wordmark have the CSS of:

.img
{
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
}
.img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

in MediaWiki:Wikia.css? Sam Wang (talkcontribs)

#WikiHeader h1.wordmark.medium.text {
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
}
#WikiHeader h1.wordmark.medium.text:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

 TK999 15:43, January 3, 2012 (UTC)

This doesn't work somehow, do you know what is the problem? Sam Wang (talkcontribs)
Try changing the semicolons at the end of the lines to !important;TK999 14:15, January 31, 2012 (UTC)
So how should it look like? I don't quite understand what you mean Sam Wang 02:31, February 1, 2012 (UTC)

(Reset indent) So do you mean:

#WikiHeader h1.wordmark.medium.img {
opacity:0.85 !important;
filter:alpha(opacity=85) !important; /* For IE8 and earlier */
}
#WikiHeader h1.wordmark.medium.img:hover
{
opacity:1.0 !important;
filter:alpha(opacity=100) !important; /* For IE8 and earlier */
}

Sam Wang 02:33, February 2, 2012 (UTC)

I've figured it out by myself now. The correct source should be:
#WikiHeader h1.wordmark img {
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
}
#WikiHeader h1.wordmark img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

HomeContent

Like in http://www.wikia.com/Wikia, how can I write the CSS of the div class HomeContent? Sam Wang (talkcontribs)

I'm not exactly sure what you mean, to be honest. :P Are you trying to only copy the HomeContent class or are you trying to recreate the entire element as it appears on Wikia's homepage? The 888th Avatar (talk) 10:15, January 31, 2012 (UTC)
I want to know what is the CSS for the class: HomeConetent in http://www.wikia.com/Wikia Sam Wang 02:32, February 1, 2012 (UTC)
.HomeContent {
border-bottom: solid 1px #CCC;
border-top: solid 1px #CCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 27px;
margin-bottom: 30px;
padding: 0 0 22px 29px;
}

The 888th Avatar (talk) 03:00, February 1, 2012 (UTC)

How about h2, font, and wikia-button styles? Sam Wang 04:45, February 1, 2012 (UTC)
.HomeContent h2 {
border: none;
padding-top: 9px;
font-size: 23px;
}

.HomeContent p, .HomeContent .MainArticle li, .MainArticle .HomeContent li, .HomeContent .MainArticle dt, .MainArticle .HomeContent dt, .HomeContent .MainArticle dd, .MainArticle .HomeContent dd {
font-size: 18px;
width: 520px;
}

.HomeContent span {
float: right;
position: relative;
top: -71px;
margin-right: 80px;
}

.HomeContent a, .HomeContent a:visited, .HomeContent a:active {
color: white;
}

.HomeContent .wikia-button {
font-size: 23px;
padding: 20px;
}

The 888th Avatar (talk) 05:25, February 1, 2012 (UTC)

This one has a few problems with font styles, and it doesn't work. Can you help me please? Sam Wang 02:29, February 2, 2012 (UTC)