ProfC
07-24-2015, 11:56 AM
Hi folks,
A few users on my board have suggested that we change the "backgrounds" of certain sections/categories to make them more indicative of what their purpose is. I'm not 100% on how to achieve this.
I was thinking that it could be possible via CSS and <div> tags, but I'm not particularly experienced in that area.
Using the additional.css file, and some old knowledge, I've had a go on a category as a test but for some reason, the container isn't expanding to cover the entire area and it looks really scrunched up (http://gyazo.com/dc0fe4c085d271fdba4db888f95052af). (Please ignore the colour of the text)
Would it be possible for someone to tell me what I'm doing wrong?
Thank you in advance :)
In the forum description:
<class id="alexandria_castle";></class>
In additional.css
#alexandria_castle
{
background-image:url("http://i.imgur.com/F52Yu1U.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 400px;
color: #FCFC38;
border: 1px outset #CD7F32;
padding: 1px;
border-radius: 2px;
}
A few users on my board have suggested that we change the "backgrounds" of certain sections/categories to make them more indicative of what their purpose is. I'm not 100% on how to achieve this.
I was thinking that it could be possible via CSS and <div> tags, but I'm not particularly experienced in that area.
Using the additional.css file, and some old knowledge, I've had a go on a category as a test but for some reason, the container isn't expanding to cover the entire area and it looks really scrunched up (http://gyazo.com/dc0fe4c085d271fdba4db888f95052af). (Please ignore the colour of the text)
Would it be possible for someone to tell me what I'm doing wrong?
Thank you in advance :)
In the forum description:
<class id="alexandria_castle";></class>
In additional.css
#alexandria_castle
{
background-image:url("http://i.imgur.com/F52Yu1U.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 400px;
color: #FCFC38;
border: 1px outset #CD7F32;
padding: 1px;
border-radius: 2px;
}