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.

Help to change my CSS

View previous topic View next topic Go down

In progress Help to change my CSS

Post by ,dArkRay on July 17th 2013, 11:47 pm



Hi, I want to make some changes on my forum like you saw on the image, I will explain better.

Here´s my forum: http://www.mewtwoproject.net/

Here´s my css:

Code:
/* Name */
#page-header .navbar {
background: url(http://i.imgur.com/r7WXOM6.pngg) no-repeat;
padding-left: 41px;
position: absolute;
right: -10px;
top: 90.5px;
}

#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -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-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.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;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */

.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  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: bold;
  line-height: 24px;
  white-space: nowrap;
}

.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;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}

I want to move the actual menu (right side) to the left and create another menu just for the login/logout, register and private messages on the top right corner.

I have the 2 images needed:
https://i36.servimg.com/u/f36/18/41/58/48/110.png
https://i36.servimg.com/u/f36/18/41/58/48/210.png

The other one is on the css.

Can you help me to achieve this?

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by levy on July 18th 2013, 12:20 am

Replace all your CSS with this :

Code:
/* Name */
#page-header .navbar {
background: transparent;
padding: 0px;
position: absolute;
top: 90.5px;
left: 0px;
}



#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -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-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.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;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */

.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  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: bold;
  line-height: 24px;
  white-space: nowrap;
}

.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;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}

#panou_logare2 , #panou_logare{
background-color: #272727;
background-repeat: no-repeat;
max-height: 24px;
min-height: 24px;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 99999!important;
}

.wam {
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 237px;
top: 0;
width: 41px;
z-index: 999;
}

#panou_logare2 a , #panou_logare a{
  color:white;
  font-weight:bold;
}

.wam2{
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 124px;
top: 0;
width: 41px;
z-index: 999;
}

And now , create a new javascript , mark in all pages and add this code :

Code:
$(document).ready(function(){
 var existLog = $('#logout').length;

  if(existLog === 0) {
    $('#wrap').before('<div class="wam2"></div><div id="panou_logare">
<div id="optiuni">
<a href="/login"><img class="sus_jos" src="http://www.ipbforumskins.com/skindemo/public/style_images/villain/user_login.png"/>Login</a>
<a href="/register"><img class="sus_jos" src="http://www.ipbforumskins.com/skindemo/public/style_images/villain/user_register.png"/>Register</a>
</div>
<div id="cautare"></div>
<style>#panou_logare2{display:none;}</style>
</div><br/><br/>');}

$('.navbar #search-box').appendTo('#cautare');
});


$(document).ready(function(){
$('#wrap').before('<div class="wam"></div><div id="panou_logare2">
<a href="/profile?mode=editprofile"><img class="sus_jos" src="http://cdn4.iconfinder.com/data/icons/berlin/16x16/hire-me.png" />Profile</a>
<a href="/privmsg?folder=inbox"><img class="sus_jos" src="http://cdn2.iconfinder.com/data/icons/diagona/icon/16/004.png"/>Private messages</a>
<a href="/login?logout=1"><img class="sus_jos" src="http://cdn5.iconfinder.com/data/icons/frankfurt/16/logout.png"/>Logout</a>

</div>');
});

You will need to replace some images , good luck , if you have probles ,announce me

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 18th 2013, 2:40 am

candy_fear wrote:Replace all your CSS with this :

Code:
/* Name */
#page-header .navbar {
background: transparent;
padding: 0px;
position: absolute;
top: 90.5px;
left: 0px;
}



#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
 cursor: pointer;
 cursor: -webkit-zoom-in;
 cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
 vertical-align: top;
 padding: 0;
 margin: 0;
}

.fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 920;
}

.fancybox-skin {
 position: relative;
 padding: 0;
 margin: 0;
 background: #f9f9f9;
 color: #444;
 text-shadow: none;
 -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.fancybox-opened {
 z-index: 930;
}

.fancybox-opened .fancybox-skin {
 -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-outer, .fancybox-inner {
 padding: 0;
 margin: 0;
 position: relative;
 outline: none;
}

.fancybox-inner {
 overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
 -webkit-overflow-scrolling: touch;
}

.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;
 padding: 0;
 margin: 0;
 vertical-align: top;
}

.fancybox-image {
 max-width: 100%;
 max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
 background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -22px;
 margin-left: -22px;
 background-position: 0 -108px;
 opacity: 0.8;
 cursor: pointer;
 z-index: 920;
}

#fancybox-loading div {
 width: 44px;
 height: 44px;
 background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
 position: absolute;
 top: -18px;
 right: -18px;
 width: 36px;
 height: 36px;
 cursor: pointer;
 z-index: 940;
}

.fancybox-nav {
 position: absolute;
 top: 0;
 width: 40%;
 height: 100%;
 cursor: pointer;
 background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 z-index: 940;
}

.fancybox-prev {
 left: 0;
}

.fancybox-next {
 right: 0;
}

.fancybox-nav span {
 position: absolute;
 top: 50%;
 width: 36px;
 height: 34px;
 margin-top: -18px;
 cursor: pointer;
 z-index: 940;
 visibility: hidden;
}

.fancybox-prev span {
 left: 20px;
 background-position: 0 -36px;
}

.fancybox-next span {
 right: 20px;
 background-position: 0 -72px;
}

.fancybox-nav:hover span {
 visibility: visible;
}

.fancybox-tmp {
 position: absolute;
 top: -9999px;
 left: -9999px;
 padding: 0;
 overflow: visible;
 visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 910;
 background: #000;
}

#fancybox-overlay.overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

/* Title helper */

.fancybox-title {
 visibility: hidden;
 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 position: relative;
 text-shadow: none;
 z-index: 950;
}

.fancybox-opened .fancybox-title {
 visibility: visible;
}

.fancybox-title-float-wrap {
 position: absolute;
 bottom: 0;
 right: 50%;
 margin-bottom: -35px;
 z-index: 930;
 text-align: center;
}

.fancybox-title-float-wrap .child {
 display: inline-block;
 margin-right: -100%;
 padding: 2px 20px;
 background: transparent; /* Fallback for web browsers that doesn't support RGBa */
 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: bold;
 line-height: 24px;
 white-space: nowrap;
}

.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;
 padding: 10px;
 background: #000;
 background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}

#panou_logare2 , #panou_logare{
background-color: #272727;
background-repeat: no-repeat;
max-height: 24px;
min-height: 24px;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 99999!important;
}

.wam {
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 237px;
top: 0;
width: 41px;
z-index: 999;
}

#panou_logare2 a , #panou_logare a{
 color:white;
 font-weight:bold;
}

.wam2{
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 124px;
top: 0;
width: 41px;
z-index: 999;
}

And now , create a new javascript , mark in all pages and add this code :

Code:
$(document).ready(function(){
 var existLog = $('#logout').length;

 if(existLog === 0) {
  $('#wrap').before('<div class="wam2"></div><div id="panou_logare">
<div id="optiuni">
<a href="/login"><img class="sus_jos" src="http://www.ipbforumskins.com/skindemo/public/style_images/villain/user_login.png"/>Login</a>
<a href="/register"><img class="sus_jos" src="http://www.ipbforumskins.com/skindemo/public/style_images/villain/user_register.png"/>Register</a>
</div>
<div id="cautare"></div>
<style>#panou_logare2{display:none;}</style>
</div><br/><br/>');}

$('.navbar #search-box').appendTo('#cautare');
});


$(document).ready(function(){
$('#wrap').before('<div class="wam"></div><div id="panou_logare2">
<a href="/profile?mode=editprofile"><img class="sus_jos" src="http://cdn4.iconfinder.com/data/icons/berlin/16x16/hire-me.png" />Profile</a>
<a href="/privmsg?folder=inbox"><img class="sus_jos" src="http://cdn2.iconfinder.com/data/icons/diagona/icon/16/004.png"/>Private messages</a>
<a href="/login?logout=1"><img class="sus_jos" src="http://cdn5.iconfinder.com/data/icons/frankfurt/16/logout.png"/>Logout</a>

</div>');
});

You will need to replace some images , good luck , if you have probles ,announce me

You are amazing!

But now the header is strange (have a space on top of the banner) and the right bar is not in the place that should be (like I put on the image). Also I think i was misunderstood, this is what I want on each bar:

Left Bar:
Inicio (Home)
Membros (Members)
Grupos (Groups)
Chatbox

Right Bar:
Entrar (Login)
Criar Nova Conta (Register)
-----------------
Perfil (Profile)
Mensagens privadas (Private Messages)
Sair (Logout)

Oh, also the private message that you added in the right bar does not show the number of new messages or something like that. And can you put the search box on the right side again?

Thank you for your patience, can you help me with this?

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by Sir Chivas™ on July 18th 2013, 4:55 am

So, let me get this straight you want to have to bars showing?

Left bar containing the following:
Inicio (Home)
Membros (Members)
Grupos (Groups)
Chatbox

Right bar:
Entrar (Login)
Criar Nova Conta (Register)
-----------------
Perfil (Profile)
Mensagens privadas (Private Messages)
Sair (Logout)


Let me see what I can do, I'll test it out in my testing forum before giving out any codes, thank you for your patients.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 18th 2013, 6:23 am

Sir Chivas wrote:So, let me get this straight you want to have to bars showing?

Left bar containing the following:
Inicio (Home)
Membros (Members)
Grupos (Groups)
Chatbox

Right bar:
Entrar (Login)
Criar Nova Conta (Register)
-----------------
Perfil (Profile)
Mensagens privadas (Private Messages)
Sair (Logout)


Let me see what I can do, I'll test it out in my testing forum before giving out any codes, thank you for your patients.

I can send you the template via pm, I can send it too to Candy_Fear. You dont need to thank me, I thank youpirat

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 19th 2013, 4:10 pm

UP

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by levy on July 19th 2013, 4:19 pm

Code:
#page-header .navbar  > span.corners-top span {
background-image: url(http://i36.servimg.com/u/f36/18/41/58/48/110.png);
background-position: 100% 0;
width: 41px;
height: 34px;
float: right;
position: relative;
left: 31px;
}

For the second problem , it is very easy to does with widgets , I will come faster with the code .
tip : you can do that with Widget

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 19th 2013, 4:27 pm

candy_fear wrote:
Code:
#page-header .navbar > span.corners-top span {
background-image: url(http://i36.servimg.com/u/f36/18/41/58/48/110.png);
background-position: 100% 0;
width: 41px;
height: 34px;
float: right;
position: relative;
left: 31px;
}

For the second problem , it is very easy to does with widgets , I will come faster with the code .
tip : you can do that with Widget

Hi Candy_Fear,

Actually nothing changed, here is my CSS Code:

Code:
/* Name */
#page-header .navbar {
background: transparent;
padding: 0px;
position: absolute;
top: 90.5px;
left: 0px;
}



#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -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-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.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;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */

.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  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: bold;
  line-height: 24px;
  white-space: nowrap;
}

.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;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}

#panou_logare2 , #panou_logare{
background-color: #272727;
background-repeat: no-repeat;
max-height: 24px;
min-height: 24px;
padding: 5px;
position: absolute;
right: 0;
top: 0;
z-index: 99999!important;
}

.wam {
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 237px;
top: 0;
width: 41px;
z-index: 999;
}

#panou_logare2 a , #panou_logare a{
  color:white;
  font-weight:bold;
}

.wam2{
background: url(http://i36.servimg.com/u/f36/18/41/58/48/210.png) no-repeat;
height: 34px;
position: absolute;
right: 124px;
top: 0;
width: 41px;
z-index: 999;
}

#page-header .navbar  > span.corners-top span {
background-image: url(http://i36.servimg.com/u/f36/18/41/58/48/110.png);
background-position: 100% 0;
width: 41px;
height: 34px;
float: right;
position: relative;
left: 31px;
}

Like I Said Before, I can provide you a copy of my Forum, I think you will be able to help me faster like that, dont you agree? Also, thanks for your support! Im at working at codeacademy but still in the HTML...

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by levy on July 19th 2013, 4:32 pm

Code:
/* Name */
#page-header .navbar {
background: transparent;
padding: 0px;
position: absolute;
top: 90.5px;
left: 0px;
}



#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 920;
}

.fancybox-skin {
  position: relative;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
          border-radius: 4px;
}

.fancybox-opened {
  z-index: 930;
}

.fancybox-opened .fancybox-skin {
  -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-outer, .fancybox-inner {
  padding: 0;
  margin: 0;
  position: relative;
  outline: none;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.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;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 920;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 940;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  z-index: 940;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 940;
  visibility: hidden;
}

.fancybox-prev span {
  left: 20px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 20px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -9999px;
  left: -9999px;
  padding: 0;
  overflow: visible;
  visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 910;
  background: #000;
}

#fancybox-overlay.overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Title helper */

.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 950;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 930;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent; /* Fallback for web browsers that doesn't support RGBa */
  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: bold;
  line-height: 24px;
  white-space: nowrap;
}

.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;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}


#page-header .navbar  span.corners-top span {
background-image: url(http://i36.servimg.com/u/f36/18/41/58/48/110.png);
background-position: 100% 0;
width: 41px;
height: 34px;
float: right;
position: relative;
left: 31px;
}

Try now

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 19th 2013, 5:10 pm

candy_fear wrote:
Code:
/* Name */
#page-header .navbar {
background: transparent;
padding: 0px;
position: absolute;
top: 90.5px;
left: 0px;
}



#wrap {
background: #fff;
border: 1px solid #2B2B2B;
border-bottom: 0;
border-top: 0;
box-shadow: 0 0 20px rgba(0,0,0,0.56);
height: auto;
margin: -10px auto;
position: relative;
width: 1200px;
margin-bottom: 15px;
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}

.headerbar {
background: #fff url(http://i.imgur.com/0l21qSb.png) no-repeat;
border-bottom: 1px solid #fff;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}

.forabg , .forumbg {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#search-box input.button2 {
background: url(http://www.mybb.com/assets/images/search_button.gif) 100% 0 no-repeat;
border: 0;
color: #fff;
cursor: pointer;
float: left;
font-family: arial, Tahoma, 'Trebuchet MS', sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
}

#search-box {
display: inline-table;
float: right;
height: 26px;
position: absolute;
right: 10px;
top: -50px;
}

#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
float: left;
font-family: Arial, 'Trebuchet MS', Tahoma, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}

#page-header div.navbar ul.linklist {
background: #016db0 url(http://i.imgur.com/KnSvyz1.png) repeat-x;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
margin-top: -5px;
border-bottom: 0px;
}

a[href="/calendar"]{display:none!important;}
a[href="/faq"]{display:none!important;}
a[href="/search"]{display:none!important;}


#page-header .navbar li.active {
background: url(http://www.mybb.com/assets/images/menu_bg_active2.png) no-repeat top right;
padding-right: 4px;
position: relative;
bottom: -1px;
}

#page-header .navbar li.active a,#page-header .navbar li.active a:hover {
background: url(http://www.mybb.com/assets/images/menu_bg_active.png) no-repeat top left;
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
}

#page-header .navbar li a {
border-bottom: 0;
color: #fff;
display: inline;
padding: 4px 10px 3px;
text-decoration: none;
position: relative;
top: 5px;
}

#page-header .navbar li a:hover {
color: #ffffff;
border-bottom: 2px solid #ffffff;
}

span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}

#page-header .navbar a[href="/"]{
margin-right: -15px;
}


a.fa_fancybox img{
 cursor: pointer;
 cursor: -webkit-zoom-in;
 cursor: -moz-zoom-in;
}
/* general */
.fancybox-tmp iframe, .fancybox-tmp object {
 vertical-align: top;
 padding: 0;
 margin: 0;
}

.fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 920;
}

.fancybox-skin {
 position: relative;
 padding: 0;
 margin: 0;
 background: #f9f9f9;
 color: #444;
 text-shadow: none;
 -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.fancybox-opened {
 z-index: 930;
}

.fancybox-opened .fancybox-skin {
 -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-outer, .fancybox-inner {
 padding: 0;
 margin: 0;
 position: relative;
 outline: none;
}

.fancybox-inner {
 overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
 -webkit-overflow-scrolling: touch;
}

.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;
 padding: 0;
 margin: 0;
 vertical-align: top;
}

.fancybox-image {
 max-width: 100%;
 max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
 background-image: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png');
}

#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -22px;
 margin-left: -22px;
 background-position: 0 -108px;
 opacity: 0.8;
 cursor: pointer;
 z-index: 920;
}

#fancybox-loading div {
 width: 44px;
 height: 44px;
 background: url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat;
}

.fancybox-close {
 position: absolute;
 top: -18px;
 right: -18px;
 width: 36px;
 height: 36px;
 cursor: pointer;
 z-index: 940;
}

.fancybox-nav {
 position: absolute;
 top: 0;
 width: 40%;
 height: 100%;
 cursor: pointer;
 background: transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif'); /* helps IE */
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 z-index: 940;
}

.fancybox-prev {
 left: 0;
}

.fancybox-next {
 right: 0;
}

.fancybox-nav span {
 position: absolute;
 top: 50%;
 width: 36px;
 height: 34px;
 margin-top: -18px;
 cursor: pointer;
 z-index: 940;
 visibility: hidden;
}

.fancybox-prev span {
 left: 20px;
 background-position: 0 -36px;
}

.fancybox-next span {
 right: 20px;
 background-position: 0 -72px;
}

.fancybox-nav:hover span {
 visibility: visible;
}

.fancybox-tmp {
 position: absolute;
 top: -9999px;
 left: -9999px;
 padding: 0;
 overflow: visible;
 visibility: hidden;
}

/* Overlay helper */

#fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 910;
 background: #000;
}

#fancybox-overlay.overlay-fixed {
 position: fixed;
 bottom: 0;
 right: 0;
}

/* Title helper */

.fancybox-title {
 visibility: hidden;
 font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 position: relative;
 text-shadow: none;
 z-index: 950;
}

.fancybox-opened .fancybox-title {
 visibility: visible;
}

.fancybox-title-float-wrap {
 position: absolute;
 bottom: 0;
 right: 50%;
 margin-bottom: -35px;
 z-index: 930;
 text-align: center;
}

.fancybox-title-float-wrap .child {
 display: inline-block;
 margin-right: -100%;
 padding: 2px 20px;
 background: transparent; /* Fallback for web browsers that doesn't support RGBa */
 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: bold;
 line-height: 24px;
 white-space: nowrap;
}

.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;
 padding: 10px;
 background: #000;
 background: rgba(0, 0, 0, .8);
}

.expand, .contract {position: absolute; top: 6px; right: 10px; cursor: pointer; width: 9px; height: 9px; background: url(http://illiweb.com/fa/m/tabs_more1.gif);}
.contract {background: url(http://illiweb.com/fa/m/tabs_less1.gif);}

.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

ul#picture_legend li img {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}


#page-header .navbar span.corners-top span {
background-image: url(http://i36.servimg.com/u/f36/18/41/58/48/110.png);
background-position: 100% 0;
width: 41px;
height: 34px;
float: right;
position: relative;
left: 31px;
}

Try now

Hi,
http://www.mewtwoproject.net/

Its better, but still need some improvements and the space in the header is bigger now, this is a test foruns and you can see how the header was:
http://fdt.mewtwoproject.net/

,dArkRay
Forumember

Posts : 98
Reputation : 1
Language : English | Portuguese

Back to top Go down

In progress Re: Help to change my CSS

Post by ,dArkRay on July 22nd 2013, 3:12 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