Hitskin.com
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
Thanks and help me please
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://2img.net/i/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://2img.net/i/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
Facebook
Twitter
Pinterest
Youtube
