The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Background of widgets title?

View previous topic View next topic Go down

Background of widgets title?

Post by refresh102 on April 1st 2015, 9:53 am

Hey hey its me again how do i put some fancy background on my widgets title just like in my category title?
this looks like (My category title with some nice background)

Here the image of my category background (the light blue with gray border box) .


And here is my current widget title ( no light blue with gray boder box background ).


And here is the example that i want to be like (This is Photoshop edited)


My Forum Address :http://hunterxroleplay.forumh.net/
My Forum Version : PunBB
My CSS if you want
My CSS:

Code:
/* css by genji watanabe copyright 9/11/2013 */


.infobulle{position: relative;z-index: 0;}

.infobulle:hover{background-color: transparent;z-index: 50;}

.infobulle span{
position: absolute;
background-color: #EDE6E6;
padding: 5px;
left: 10px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{border: 1px;padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 100px;
left: 00px;
width: 106px ;
color:#8C7B7B;
border: 1px outset #C8C8C8;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}




.opac {
opacity:0.6;
-moz-opacity:0.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
}

.opac:hover {
opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
}

a:hover { letter-spacing: 2px; }

a:hover {
font-variant : small-caps;
}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}


a
{
font-variant: small-caps;
text-decoration: none;
}





.onglet {
display:inline-block;
margin:20px 5px;
}
.onglet:hover {
padding-left: 20px;
font-size: 16px;
font-family: Georgia;
letter-spacing: 2px;
border-bottom: 4px solid #F4F5EB;
border-left: 4px solid #F4F5EB;
border-radius: 20px;
-moz-border-radius: 20px;
-htm-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
color: #D8DBAD !important;
text-shadow: 0px 0px 1px #D8DBAD;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.actif {
display:inline-block;
margin:20px 5px;
}


#pun-visit, .main-box, #qjump {
display: none;
}



.pun a:link {
color: #729FB2;
text-decoration: none !important;
}


.pun a:visited {
color: #729FB2;
text-decoration: none !important;
}


.pun a:hover {
color: #f90;
text-decoration: none !important;
}



body {
padding: 20px;
background: #E4ECEF url('http://i.imgur.com/DQexGZ2.png');
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #666;
}


.pun {
width: 95%;
padding: 10px;
background: #EEF5F7;
border: 1px solid #CFD5DA;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}


.pun-inside {
padding: 10px;
background: #fff;
}


.pun .main-content {
background: #f6f7f8;
border: 1px solid #CFD5DA;
}



#pun-about {
background: #EEF5F7;
border: 1px solid #CFD5DA;
}


#stats {
background: transparent !important;
}


#onlinelist {
background: transparent !important;
border-top: 1px solid #CFD5DA;
}


.boxonline {
margin-left: 20px;
padding: 4px 10px;
background: #EEF5F7;
border: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #729FB2;
}



#pun-intro {
margin: 0 auto;
width: 95%;
background: transparent !important;
border: 0px solid #ddd;
}


#pun-logo {
margin: 20px 0px;
}



.showhide_menu {
width: 370px;
height: 50px;
padding: 15px;
background: #EEF5F7;
border: 1px solid #CFD5DA;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
text-align: center;
font-size: 10px;
}



#pun-nav {
margin: 0 0 1em 0;
padding: 0.6em 1em;
background: #EEF5F7;
border: 1px solid #CFD5DA;
}


#pun-nav ul {
float: right;
width: 60%;
text-align: right;
list-style-type: none;
}


#pun-nav li {
margin-left: 0.7em;
white-space: nowrap;
float: right;
}


#pun-nav li a {
padding-left: 17px;
}



.pun .paged-foot, .pun .paged-head {
background: transparent !important;
border: 0px solid #ddd;
}


.main .main-head {
margin: 5px;
background: transparent !important;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
color: #666;
}


.main .main-foot {
margin: 5px;
background: transparent !important;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
color: #666;
}



.main .main-head .page-title, .pun .main-head .h2, .subtitle {
width: 350px;
line-height: 150%;
padding: .6em 1em;
background: #EEF5F7;
border: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: 700;
font-size: 10px;
}


.main .main-foot .page-title, .pun .main-foot .h2 {
width: 350px;
line-height: 150%;
padding: .6em 1em;
background: #EEF5F7;
border: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: 700;
font-size: 10px;
}


.pun h2, .pun h3 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: 700;
font-size: 10px;
}


.pun-crumbs p {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: 700;
font-size: 10px;
color: #666;
}



.pun table.table th {
background: transparent !important;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #666;
}


.pun table.table td {
background: transparent !important;
border-top: 1px solid #CFD5DA;
border-bottom: 0px solid #ddd;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
}


tr.cat {
display: inline-block;
margin: 5px;
padding: 5px;
width: 426px;
min-height: 50px;
background: #EEF5F7;
border: 1px solid #CFD5DA;
}


td.cat {
border-top: 0px solid #ddd !important;
}


#cat-title {
margin-top: -5px;
margin-bottom: 0px;
margin-left: -5px;
margin-right: -5px;
padding: 5px;
border-bottom: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
overflow: hidden;
}


#cat-detail {
margin: 10px 0px;
padding: 10px;
background: #fff;
border: 1px solid #CFD5DA;
text-align: justify;
overflow: hidden;
}


#cat-detail img {
margin-right: 10px;
padding-right: 10px;
max-width: 50px;
border-right: 1px solid #CFD5DA;
}


#cat-last {
margin: 10px 0px;
padding: 10px;
background: #fff;
border: 1px solid #CFD5DA;
text-align: justify;
overflow: hidden;
}


.topics, .posts {
display: inline;
padding-top: 5px;
padding-right: 10px;
}


.topics span, .posts span {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #729FB2;
}



.pun .post {
margin: 5px;
background: #EEF5F7;
border-color: #CFD5DA;
border-style: solid;
border-width: 1px;
}


.pun .postmain {
background: transparent !important;
border-left: 1px solid #CFD5DA;
}


.pun .posthead {
background: transparent !important;
border-bottom: 1px dashed #CFD5DA;
}


.postfoot {
margin: 0px;
border-top: 1px dashed #CFD5DA;
}


.pun .user-ident .username {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
}


.pun .user-ident .user-basic-info {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
text-align: center;
}


.pun .user .user-info {
padding: 5px;
background: #f6f7f8;
border: 1px solid #CFD5DA;
color: #666;
}


.codebox {
padding: 5px;
background: #f6f7f8;
border: 1px solid #CFD5DA;
}


.codebox dt {
border-bottom: 1px dashed #CFD5DA;
}


.codebox dd {
background: transparent !important;
}


.postmain blockquote {
background: #f6f7f8;
border: 1px solid #CFD5DA;
}


.postmain cite {
padding-bottom: 5px;
border-bottom: 1px solid #CFD5DA;
}



.pun .main-head a.exthelp, .pun .main-head a.exthelp:link, .pun .main-head a.exthelp:visited {
background-image: url('http://illiweb.com/fa/empty.gif');
}


.main .main-content.frm {
background: #f6f7f8;
}


.pun .frm-form {
background: transparent !important;
}


.frm-buttons {
border-top: 1px solid #CFD5DA;
}


.sceditor-container {
background: #EEF5F7 !important;
border: 1px solid #CFD5DA !important;
}


div.sceditor-toolbar {
background: #EEF5F7 !important;
border-bottom: 1px solid #CFD5DA !important;
}


div.sceditor-group {
background: transparent !important;
border-bottom: 0px solid #ddd !important;
}


.sceditor-container textarea {
border: 1px solid #CFD5DA !important;
font-size: 10px !important;
}



.pun .frm .frm-form table {
background: #EEF5F7;
border: 1px solid #CFD5DA;
border-color: #CFD5DA;
border-top: 1px solid #CFD5DA;
}


.pun .main .main-content.message {
background: #f6f7f8;
}


.pun .main .main-content p.message {
background: #EEF5F7;
border: 1px solid #CFD5DA;
}



.main .frm-info {
padding: 35px 35px 35px 85px;
background: #EEF5F7 url('https://cdn0.iconfinder.com/data/icons/TWG_Retina_Icons/64/info.png');
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid #CFD5DA;
}


fieldset.frm-set.multi {
border: 0px solid #ddd;
}


.sub-head {
border-bottom: 1px solid #CFD5DA;
}


#profile-advanced-details div.separator {
border-bottom: 1px solid #CFD5DA;
}



#tabs ul li.activetab a {
background: #EEF5F7;
border: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
color: #f90;
}


#tabs ul li.activetab a:hover {
background: #EEF5F7;
}


#tabs ul li a {
background: #f6f7f8;
border: 1px solid #CFD5DA;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 10px;
color: #666;
}


#tabs ul li a:hover {
background: #EEF5F7;
color: #f90;
}
.postbody .username{
text-align: center;
width:100%
}
.prevImg {
background:url(http://illiweb.com/fa/prosilver_grey/subforum_read.gif) no-repeat;
background-size:100% 100%;
display:block;
width:25px;
height:25px;
margin:3px;
float:left;
overflow:hidden;
}

.prevImg img {
width:25px;
height:25px;
}
body {
margin: 0px;
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;
}
a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), default;
}
.mini_ava2 > img {
height: 20px;
margin-right: 5px;
width: 20px;
}

Thanks and help me please

refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

Re: Background of widgets title?

Post by Fierce Star on April 1st 2015, 6:51 pm

Add this to your CSS (ACP -> Display -> Colors -> CSS Stylesheet):
Code:
.module .h3 {
    background: none repeat scroll 0 0 #f6f7f8;
    border: 1px solid #cfd5da;
    margin: -5px -18px;
    padding: 8px;
}

Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Re: Background of widgets title?

Post by refresh102 on April 2nd 2015, 1:48 am

yeah its working but only the latest topic widget doesnt have a background ? can you help me please?

refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

Re: Background of widgets title?

Post by Fierce Star on April 2nd 2015, 7:02 am

Apologies on that, simple replace the above code I gave you with this one:
Code:
.module .h3, .module h3 {
    background: none repeat scroll 0 0 #f6f7f8;
    border: 1px solid #cfd5da;
    margin: -5px -18px;
    padding: 8px;
}

Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Re: Background of widgets title?

Post by refresh102 on April 2nd 2015, 7:22 am

Thank you and Solved you saved my day.

refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum