MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Add a nice image to your code and quote boxes in background
Full Version: Add a nice image to your code and quote boxes in background
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

envira

2011-04-19, 10:32 AM
Hello friends,
This is a small tutorial on how to add a nice background to your code and quote boxes.

Here is the tut:
Navigate to your ACP>Themes>your Theme>open Global.css and find:

1.For code box:

Find : .codeblock .title {

add below it within:

background: #your color url(images/your image path .gif/png) no-repeat right;

this is how it looks likeSadexample of mybbstar.com code looks like this )

.codeblock .title {
        background: #c9dff5 url(images/ico/code.png) no-repeat right;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
        margin: 4px;
}

so this is it....you can see the codebox title and color now...with a background image to the right.
demo here :


2.For quote box:

this one too is similar....

Just in global.css of your theme,look for

blockquote cite {

add this within the code in css the given code.

background: #your color url(images/your image path png/gif) no-repeat right center;

it should look like (example of mybbstar.com)

Quote:blockquote cite {
background: #fff url(images/ico/quote.png) no-repeat right center;
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
margin: 4px 0;
}

you can see a beautiful bordered quote box ....and see the image to right.
see the quote here

Note : you can create your images accordingly:
if you want default images: download : [attachment=22364]


hope this small tut helps.
thank you.



MyBB Community Forums > Resources > Tutorials > Add a nice image to your code and quote boxes in background