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.

Changing the Theme according to a image made on photoshop

View previous topic View next topic Go down

Changing the Theme according to a image made on photoshop

Post by ,dArkRay on August 13th 2013, 11:28 pm

Hey Guys, I need some help with css to make my forums look like this:
http://i.imgur.com/NRxzuPE.png

This is my forum:
http://check-point.foruns.com.pt/forum

 This is my CSS:
Code:
.post, .post.row1, .post .inner {
background: white !important;
}

.dterm {
position: relative !important;
left: 25px !important;
}


blockquote {
background: #ebeadd url(http://illiweb.com/fa/prosilver/quote.gif) 6px 8px no-repeat;
border: 1px solid #DBDBCE;
font-size: .95em;
margin: 1em 1px 1em 25px;
overflow: hidden;
padding: 5px;
}

.table-title, .table-title h2 {
border-left-width: 0;
color: #fff;
font-family: arial,helvetica,sans-serif,Verdana,Arial,Helvetica,sans-serif;
font-size: 10px !important;
line-height: 1em;
margin: 2px 0 4px;
padding-bottom: 2px;
padding-top: 2px;
text-transform: uppercase;
font-weight: 500 !important;
}
li > a.mainmenu[href="/search"] { display : none; }
li > a.mainmenu[href="/calendar"] { display : none; }
li > a.mainmenu[href="/faq"] { display : none; }
li > a.mainmenu[href="/groups"] { display : none; }


/* Fancybox by Baivong */
.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:1002}
.fancybox-outer{background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:0;padding:0}
.fancybox-opened{z-index:1003}
.fancybox-opened .fancybox-outer{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-inner{width:100%;height:100%;position:relative;outline:none;overflow:hidden;margin:0;padding:0}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;vertical-align:top;margin:0;padding:0}
.fancybox-image{max-width:100%;max-height:100%}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-21px;margin-left:-21px;width:42px;height:42px;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.gif);opacity:0.8;cursor:pointer;z-index:1010}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/fancyb10.png)}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:1004}
.fancybox-tmp{position:absolute;top:-9999px;left:-9999px;overflow:visible;visibility:hidden;padding:0}
#fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index: 999;background:#000}
.fancybox-title{display:none}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index: 999;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{margin-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
a.cgu-buttons,button.button2,input.button1,input.button2{background-image:url();border:1px solid #DDD;border-radius:2px;color:#666;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px;text-align:center;text-decoration:none}a.button1:hover,a.button2:hover,button.button2:hover,input.button1:hover,input.button2:hover{background-color:#999;background-image:url();border:1px solid #999;border-radius:2px;color:#fff;display:inline;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:400;line-height:17px;margin:0;padding:3px 7px}



/*------------------------------------------------*/
/*-------------[Tamanho do corpo fórum Fórum descrição logo]------------*/
/*------------------------------------------------*/
body#phpbb {
background-color: #eee;
}
headerbar {
padding: 0px;
}
#wrap {
width: 960px;
background: #FFFFFF;
background-color: #fff;
margin: auto;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
margin-bottom: 25px !important;
}


.footer-home::before {
content: "© FSW & FORUMEIROS ";
display: block;
  margin-top: 40px;
}
#logo-desc{width: 970px !important;
height: 300px !important;
background: transparent url("http://i.imgur.com/HMdAsr1.jpg") center center no-repeat;
#site-title h1 {display: none;}
#site-title, #site-title h1{display: none;}
#logo-desc p {display: none;}
/*------------------------------------------------*/
/*-------------[Barra de navegaçao]------------*/
/*------------------------------------------------*/
ul.navlinks {
border-bottom: 1px solid transparent;
box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
font-weight: 700;
height: 40px;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 999;
background-image: url(http://i.imgur.com/AOkgY.png);
}
ul.linklist li {
line-height: 40px;
}
ul.linklist.navlinks li a{padding: 15px 10px 15px 10px;color: #bfbfbf;}
ul.linklist.navlinks li a:hover{background: rgba(255, 255, 255, 0.05);color: #ffffff;}
/*------------------------------------------------*/
/*-------------[Panel Foros]------------*/
/*------------------------------------------------*/
.panel {
background-color: #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.row {
border-bottom: 1px solid #FFF!important;
border-top: 1px solid #CCC!important;
position: relative;
background: rgb(255, 255, 255) url(http://i.imgur.com/PtFzv.png) repeat-x left bottom;
}
.forabg {
background-color: #333333;
background-image: url(http://i.imgur.com/AOkgY.png);
background-position: 0 0;
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
padding: 0;
box-shadow: 0px 0px 15px #ccc;
border-radius: 4px;
}
.row1 {
border-bottom: 1px solid #FFF!important;
border-top: 1px solid #CCC!important;
position: relative;
background: rgb(255, 255, 255) url(http://i.imgur.com/PtFzv.png) repeat-x left bottom;}
.row2 {
border-bottom: 1px solid #FFF!important;
border-top: 1px solid #CCC!important;
position: relative;
background: rgb(255, 255, 255) url(http://i.imgur.com/PtFzv.png) repeat-x left bottom;}
/*------------------------------------------------*/
/*-------------[Foros cat Portal]------------*/
/*------------------------------------------------*/
.forumbg {
background-color: #333;
background-image: url(http://i.imgur.com/AOkgY.png);
background-position: 0 0;
border-left: 1px #ddd solid;
border-radius: 4px;
border-right: 1px #ddd solid;
box-shadow: 0 0 15px #ccc;
padding: 0;
}


.post {
background: #eee;
border-bottom: 1px solid #ccc;
box-shadow: 0px 0px 8px #ddd inset;
}
.post span.corners-top {
display: none !important;
}
.module {
border-radius: 4px;
background: #eee;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.module span.corners-top{height: 29px;
background: #333 url()repeat-x;
}
.table-title, .table-title h2 {
display: inline;
color: #FFF !important;
font-family: 'Arvo', Helvetica Neue, Helvetica, Arial, Verdana;
font-size: 1.1em;
font-weight: 700;
}
/*------------------------------------------------*/
/*-------------[search incorporado con algunos codigos importantes]------------*/
/*------------------------------------------------*/


#search-box {
background: url(http://i.imgur.com/d6Rki.png) no-repeat;
display: inline;
height: 37px;
margin-top: -50!important;
}


#search-box #keywords {
width: 130px;
background: transparent;
color: #6C6C6D;margin-left: 15px;
font-family: Verdana;margin-top:5px;
font-style: normal;
font-size: 12px;}

#search-box input {
border: none !important;
background: none;}


#search-box input.search {
background: none;
margin-left: 0px;
margin-top: 0;}


#search-box input.button2 {visibility: hidden;
}


#search_menu {
background: #ffffff;
font-size: 11px !important;
position: relative;
width: 350px;
top: 60px!important;
left: 300px!important;
}
#search_menu a{color:#000!important;}

.conteneur_container_IE{position: relative;bottom: -3px;margin-top: -2px;padding: 1px;}

/*------------------------------------------------*/
/*-------------[Borrar el subrayado de los enlaces]------------*/
/*------------------------------------------------*/
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumtitle {text-decoration: none;}
a.forumtitle:hover {text-decoration: none!important;}
a.topictitle {text-decoration: none;}
a.topictitle:hover {text-decoration: none!important;}

/*------------------------------------------------*/
/*-------------[Perfil Post]------------*/
/*------------------------------------------------*/


.postprofile {
 border: 2px solid #DEDEDE !important;
 background: #DEDEDE !important;
 border-radius: 5px 5px 5px 5px !important;
}
  
.postprofile {
text-align: center;
}
  
.postprofile {
background-color: #DEDEDE;
}
  
/*------------------------------------------------*/
/*-------------[Botones]------------*/
/*------------------------------------------------*/
input.button1, input.button2, button.button2, #main-content a.cgu-buttons {
background: #f4f5f4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 2px;}


/*------------------------------------------------*/
/*-------------[agre codigos para solucionar errores & aportes importantes no borres nada]------------*/
/*------------------------------------------------*/
#plus_menu {
background: #ffffff;
}
.user_login_form input[type="text"], .user_login_form input[type="password"]{
position:relative;
top:7px;
}
.postbody .topic-title {
font-size:1.2em;}
p.path {
background: #222 url(http://i.imgur.com/DkHoj.png) bottom repeat-x;
border: 1px solid #000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
clear: left;
color: #DDD;
margin-left: 15px;
padding: 8px;
position: absolute;
top: 265px;
width: 915px;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #555 0px 1px 0px;
}
p.path a{color:#fff!important;}
.pathname-box {
background: #222 url(http://i.imgur.com/DkHoj.png) bottom repeat-x;
border: 1px solid #000;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
clear: left;
color: #DDD;
margin-left: 15px;
padding: 8px;
position: absolute;
top: 265px;
width: 915px;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #555 0px 1px 0px;
}
.pathname-box a{color:#fff!important;}
.postbody {
clear: both;
color: #7d7d7d;
float: right;
line-height: 1.48em;
padding: 7px;
width: 75%;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
margin-top: 5px;
}
.topic-actions {
font-size: 1.1em;
height: auto;
background-color: #f5f5f5;
padding: 10px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0px;
}
h1.page-title {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
background-color: #f5f5f5;
border-bottom: 1px dotted #ddd;
padding: 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin: 0px;
}
h1.page-title a{color: #333 !important;}
blockquote cite {
display: block;
font-style: normal;
font-weight: 700;
border-bottom: 1px dashed rgba(0,0,0,.2);
padding: 3px 5px;
margin-left: -15px;
font-size: 12px;
}
blockquote {
margin: 1em 1px 1em 25px;
overflow: hidden;
background-color: #fefbf3;
padding: 9px;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
font-family: Verdana;
font-size: 12px;
line-height: 1.5em;
border-radius: 6px;
}
.content blockquote {
color: #333;
}
I would really appreciate your help, one more thing, to do this I only need to know CSS right?


Last edited by ,dArkRay on August 15th 2013, 4:08 pm; edited 1 time in total

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

Re: Changing the Theme according to a image made on photoshop

Post by SLGray on August 14th 2013, 6:48 pm

Please don't use bold or color. Please keep to the default text. This is reserved for the staff for moderation.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Changing the Theme according to a image made on photoshop

Post by ,dArkRay on August 15th 2013, 4:21 pm

@SLGray wrote:    Please don't use bold or color. Please keep to the default text. This is reserved for the staff for moderation.
 Sorry Smile

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

Re: Changing the Theme according to a image made on photoshop

Post by ,dArkRay on August 20th 2013, 9:13 am

up

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

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