Login
Name :
Pass :
Forumotion
Recent Theme
Support Forum

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

#1 Widget Title. on Wed Apr 01, 2015 1:13 pm

refresh101

avatar



Join date : 2015-03-14
100%

Hello Project-D Forums i installed Blue Profact skin in your forums and it was great i customized it and it was really nice but i encountered a really difficult to code for me btw here is the site that i installed blue profact HunterxRoleplay
the only i want is how to put some background rectangle box like the background in category title in blue profact.
here is the screenshot

Here is my current widget title (with no background)

Here is what i want (this is photoshop edited)


and here is the css code in the Blue Profact skin

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;
}


Thank you in advance and thanks for this awesome skin *cheers Laughing

View user profile http://androidmobilehacks.forumh.net/ https://www.facebook.com/Facebook

#2 Re: Widget Title. on Thu Apr 02, 2015 8:43 am

GDesign

avatar


Moderators


Join date : 2012-06-08
100%

maybe this will help...try on css and tell if working.

Code:
.module .h3, .module h3 {
  background: #color code here;
  border: 1px solid #cfd5da;
}

View user profile http://project-d.forumotion.com https://www.facebook.com/genji.watanabe

#3 Re: Widget Title. on Thu Apr 02, 2015 1:47 pm

refresh101

avatar



Join date : 2015-03-14
100%

Thanks it works Very Happy

View user profile http://androidmobilehacks.forumh.net/ https://www.facebook.com/Facebook

#4 Re: Widget Title. on Thu Apr 02, 2015 7:24 pm

GDesign

avatar


Moderators


Join date : 2012-06-08
100%

Welcome Razz
and thanks for support us until now..

View user profile http://project-d.forumotion.com https://www.facebook.com/genji.watanabe

#5 Re: Widget Title. on Fri Apr 03, 2015 4:50 am

refresh101

avatar



Join date : 2015-03-14
100%

No problem Very Happy

View user profile http://androidmobilehacks.forumh.net/ https://www.facebook.com/Facebook

#6 Re: Widget Title. on Fri Apr 03, 2015 5:06 am

BlackScorpion

avatar


Moderators


Join date : 2012-08-26
100%

Thanks refresh for the help.

View user profile http://gokartbazaar.forumotion.com

Sponsored content




View previous topic View next topic Back to top  Message [Page 1 of 1]

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