Help to make the forum look like this
5 posters
Page 1 of 1
Help to make the forum look like this
Hi Guys,
I´m new here and my forum is:
I´m new here and my forum is:
I want to change the header to look something like this: http://www.mybb.com/
I´m talking about the menus, the search box and the banner.
So I can make the banner in PSD with that shape of the menu, the rest can you help me? I think this will only need CSS, right?
With Best Regards,
Last edited by ,dArkRay on Sat 13 Jul 2013, 01:34; edited 1 time in total
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
RikudouSennin wrote:Ask a admin about this
Hi, nice nickname!
Are you suggesting me to send a message to one of the admins? Maybe, I will wait a little more, I can also give 1€ to 5€ via Paypal to the person that helps me with this.
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
That's mybb so it might not be possible on Forumotion Forums.
Derri- Helper
- Posts : 8711
Reputation : 638
Language : English & Basic French
Location : Scotland, United Kingdom
Re: Help to make the forum look like this
I done for you , but isn't exactly add this in your Administration Panel -> Display -> Colors -> CSS
Preview on your forum : http://iceimg.com/i/e6/33/2040311bb2.png
- Code:
#wrap {
position: relative;
background: #fff;
margin-left: auto;
margin-right: auto;
margin: auto;
width: 940px;
border: 1px solid #878787;
border-top: 0;
border-bottom: 0;
height: auto;
}
body {
background: #efefef url(http://www.mybb.com/assets/images/bg.gif);
line-height: 1.6em;
margin-top: 0;
margin-bottom: 0;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#search-box {
top: 60px;
right: 5px;
height: 26px;
position: absolute;
display: inline-table;
float: right;
}
#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display:none!important;
}
#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: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
display:none!important;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
Preview on your forum : http://iceimg.com/i/e6/33/2040311bb2.png
Re: Help to make the forum look like this
candy_fear wrote:I done for you , but isn't exactly add this in your Administration Panel -> Display -> Colors -> CSS
- Code:
#wrap {
position: relative;
background: #fff;
margin-left: auto;
margin-right: auto;
margin: auto;
width: 940px;
border: 1px solid #878787;
border-top: 0;
border-bottom: 0;
height: auto;
}
body {
background: #efefef url(http://www.mybb.com/assets/images/bg.gif);
line-height: 1.6em;
margin-top: 0;
margin-bottom: 0;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#search-box {
top: 60px;
right: 5px;
height: 26px;
position: absolute;
display: inline-table;
float: right;
}
#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display:none!important;
}
#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: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
display:none!important;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
Preview on your forum : http://iceimg.com/i/e6/33/2040311bb2.png
Hi Candy_Fear,
Thank you for helping me, you helped a lot! Forumotions need users like you! I still have some issues as you can see:
http://meyoutoo.motionforum.net/
In the bottom of the page and the header is still not the same... Can you fix it?
Also, can I do something fot you?
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
candy_fear wrote:What you want to does with footer , to make like myBB ?
I took somethings of the code like the background image, I don´t need that code.
So, there are some issues like the search box dissapered, the headbar (banner) is with rounded corners, the space between "inicio" and "membros" is different from the space between "membros" and other things.
You can see the issues and differences here: http://meyoutoo.motionforum.net/
Here´s the new code with the modifications I did:
- Code:
#wrap {
position: relative;
background: #fff;
margin-left: auto;
margin-right: auto;
margin: auto;
width: 940px;
border: 1px solid #878787;
border-top: 0;
border-bottom: 0;
height: auto;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#search-box {
top: 60px;
right: 5px;
height: 26px;
position: absolute;
display: inline-table;
float: right;
}
#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display:none!important;
}
#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: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
display:none!important;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
If you help with the things I want to do, I can give you 5 to 10 euros via Paypal.
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
Don't need your moneys , I help for free , but I can't add the searchbox back again because look very ugly
Add that in your CSS for corners .
- Code:
span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}
Add that in your CSS for corners .
Re: Help to make the forum look like this
candy_fear wrote:Don't need your moneys , I help for free , but I can't add the searchbox back again because look very ugly
- Code:
span.corners-top , span.corners-top span , span.corners-bottom , span.corners-bottom span {
background-image: none;
}
Add that in your CSS for corners .
Wow, thats so Sweet! It worked, can you help with the other things? (space between the menus, etç..), I made and Image, so you can understand everything
Here is my actual CSS Code:
- Code:
#wrap {
position: relative;
background: #fff;
margin-left: auto;
margin-right: auto;
margin: auto;
width: 940px;
border: 1px solid #878787;
border-top: 0;
border-bottom: 0;
height: auto;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#search-box {
top: 60px;
right: 5px;
height: 26px;
position: absolute;
display: inline-table;
float: right;
}
#search-box #keywords {
background: #fff url(http://www.mybb.com/assets/images/search.png) 5px no-repeat;
border: 1px solid #024570;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display:none!important;
}
#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: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 26px;
padding: 4px 6px;
top: 0;
width: 58px;
display:none!important;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
Thank you for helping me! You must be one of the best users in help.forumotion
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
- Code:
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: auto;
position: relative;
width: 940px;
margin-top: -10px;
margin-bottom: -10px;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
Replace your css with this .
Re: Help to make the forum look like this
candy_fear wrote:
- Code:
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: auto;
position: relative;
width: 940px;
margin-top: -10px;
margin-bottom: -10px;
}
.headerbar{
background: #fff url(http://www.mybb.com/assets/images/header.jpg) top left no-repeat;
height: 125px;
border-bottom: 1px solid #024570;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -5px;
top: 97px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
Replace your css with this .
Thank you *_*
You can see the changes:
http://meyoutoo.motionforum.net/
Is there something I can do for you? Can you help me with the rest?
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
No , I don't need something from you , for me , forumotion isn't a bussines , just help members .
Yes , if you have more problems I'm glad to help you , for any problem , please create other topic , if that is solved , edit your first post and mark as complete.
Yes , if you have more problems I'm glad to help you , for any problem , please create other topic , if that is solved , edit your first post and mark as complete.
Re: Help to make the forum look like this
candy_fear wrote:No , I don't need something from you , for me , forumotion isn't a bussines , just help members .
Yes , if you have more problems I'm glad to help you , for any problem , please create other topic , if that is solved , edit your first post and mark as complete.
But this is not complete, look at the image I posted... I Still have the white spaces in the header and the menu have differences in the spaces between them.
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
RikudouSennin wrote:Ask a admin about this
This isn't helpful at all. Please do not tell members to contact an admin if it's not necessary. If you don't know the solution then please avoid posting altogether. Thank you.
Re: Help to make the forum look like this
- Code:
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -10px;
top: 92px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: -10px auto;
position: relative;
width: 940px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.56);
}
.headerbar {
background: #fff url(http://images2.layoutsparks.com/1/143319/desert-spirit-scenery-nature-31000.jpg) no-repeat;
border-bottom: 1px solid #024570;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
replace your css with this.
Re: Help to make the forum look like this
candy_fear wrote:
- Code:
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -10px;
top: 92px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: -10px auto;
position: relative;
width: 940px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.56);
}
.headerbar {
background: #fff url(http://images2.layoutsparks.com/1/143319/desert-spirit-scenery-nature-31000.jpg) no-repeat;
border-bottom: 1px solid #024570;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
replace your css with this.
I can´t belive you only are 15 years old, your parents must be very proud of you! How can I be like you? Do you use CodeAcademy?
Now to end this for all,
- can you adjust the spaces between the menus ("inicio", "membros" etç.., the spaces don´t have the same witdh.
- put the footer with rounded corners like Mybb site and the image I posted.
- make the header clickable (I want to be able to click on the header (banner) and go to the home page like on Mybb site).
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
Hello , this is for logo and menu
and replace
with this code
CodeAcademy is the best , it is very easy to learn , I learn php and javascript from there , I suggest you to start with HTML first because is very simple for you and also with CSS , are very more sites but don't learn and learn , practice is very important , when I started first time to code , I stealing various codes from a theme and from other and from other , after 1 year I learned a nice trick ,without him was very hard for me too learn. Oh yeah , and , no one helped me , but I love this , I want to become a Web Developer , this is my wish :DIf you need help at learning you can send me a P.M to help you , don't give codes , only some training and where you don't understant I will explain you.
- Code:
#logo {
float: left;
padding: 5px;
background-image: url(BANNER HERE);
background-repeat: no-repeat;
}
#page-header .navbar a[href="/"]{
margin-right: -15px;
}
and replace
- Code:
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: -10px auto;
position: relative;
width: 940px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.56);
}
with this code
- Code:
#wrap {
background: #fff;
border: 1px solid #878787;
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: 940px;
margin-bottom: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
CodeAcademy is the best , it is very easy to learn , I learn php and javascript from there , I suggest you to start with HTML first because is very simple for you and also with CSS , are very more sites but don't learn and learn , practice is very important , when I started first time to code , I stealing various codes from a theme and from other and from other , after 1 year I learned a nice trick ,without him was very hard for me too learn. Oh yeah , and , no one helped me , but I love this , I want to become a Web Developer , this is my wish :DIf you need help at learning you can send me a P.M to help you , don't give codes , only some training and where you don't understant I will explain you.
Glad to help you,
Thisto
Thisto
Re: Help to make the forum look like this
candy_fear wrote:Hello , this is for logo and menu
- Code:
#logo {
float: left;
padding: 5px;
background-image: url(BANNER HERE);
background-repeat: no-repeat;
}
#page-header .navbar a[href="/"]{
margin-right: -15px;
}
and replace
- Code:
#wrap {
background: #fff;
border: 1px solid #878787;
border-bottom: 0;
border-top: 0;
height: auto;
margin: -10px auto;
position: relative;
width: 940px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.56);
}
with this code
- Code:
#wrap {
background: #fff;
border: 1px solid #878787;
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: 940px;
margin-bottom: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
CodeAcademy is the best , it is very easy to learn , I learn php and javascript from there , I suggest you to start with HTML first because is very simple for you and also with CSS , are very more sites but don't learn and learn , practice is very important , when I started first time to code , I stealing various codes from a theme and from other and from other , after 1 year I learned a nice trick ,without him was very hard for me too learn. Oh yeah , and , no one helped me , but I love this , I want to become a Web Developer , this is my wish :DIf you need help at learning you can send me a P.M to help you , don't give codes , only some training and where you don't understant I will explain you.Glad to help you,
Thisto
Hi, about the codes, only the first problem was solved, this 2 still need some fixing:
-put the footer with rounded corners like Mybb site and the image I posted.
- make the header clickable (I want to be able to click on the header (banner) and go to the home page like on Mybb site).
About CodeAcademy, I was inspired by them but then I suddently forgot a little of that inspiration but you just inspired me again, starting tomorrow, I will do my best to do what you can do! My dream is to become a good Programmer and maybe it´s time to fight for that dream!
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
Replace your CSS with this :
For your banner go in Administration Panel -> Display -> Pics -> Advanced Mode -> Forum main logo : ADD HERE THE URL
It is very nice to know to code and help friend , like my cousin , it is a proffesional web developer and him make me to love this more and more , because I learn more from him, help me in any moment , and we aren't stealers , plagiators , id**ts , ret**ds or something like that how all world say about my nationality : Romanian , I want to show what and romanians can , they can do very much if have with who , the CA is very good because have a console where you see all feedback from your code ,don't try .pdf books or something like that because you will only learn , not practice .
- Code:
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -10px;
top: 92px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
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: 940px;
margin-bottom: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.headerbar {
background: #fff url(http://images2.layoutsparks.com/1/143319/desert-spirit-scenery-nature-31000.jpg) no-repeat;
border-bottom: 1px solid #024570;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
For your banner go in Administration Panel -> Display -> Pics -> Advanced Mode -> Forum main logo : ADD HERE THE URL
It is very nice to know to code and help friend , like my cousin , it is a proffesional web developer and him make me to love this more and more , because I learn more from him, help me in any moment , and we aren't stealers , plagiators , id**ts , ret**ds or something like that how all world say about my nationality : Romanian , I want to show what and romanians can , they can do very much if have with who , the CA is very good because have a console where you see all feedback from your code ,don't try .pdf books or something like that because you will only learn , not practice .
Re: Help to make the forum look like this
candy_fear wrote:Replace your CSS with this :
- Code:
#page-header .navbar {
background: url(http://www.mybb.com/assets/images/menu_bg_start.png) no-repeat;
padding-left: 41px;
position: absolute;
right: -10px;
top: 92px;
}
#wrap {
background: #fff;
border: 1px solid #878787;
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: 940px;
margin-bottom: 15px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.headerbar {
background: #fff url(http://images2.layoutsparks.com/1/143319/desert-spirit-scenery-nature-31000.jpg) no-repeat;
border-bottom: 1px solid #024570;
height: 125px;
width: 100%;
margin-left: -5px;
margin-top: -5px;
}
.forabg , .forumbg {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#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: Tahoma, 'Trebuchet MS', Arial, 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: 3px;
border-top-left-radius: 3px;
float: left;
font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;
height: 14px;
padding: 5px 5px 5px 25px;
top: 0;
width: 150px;
}
#page-header div.navbar ul.linklist {
background: #016db0 url(http://www.mybb.com/assets/images/menu_bg.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;
}
For your banner go in Administration Panel -> Display -> Pics -> Advanced Mode -> Forum main logo : ADD HERE THE URL
It is very nice to know to code and help friend , like my cousin , it is a proffesional web developer and him make me to love this more and more , because I learn more from him, help me in any moment , and we aren't stealers , plagiators , id**ts , ret**ds or something like that how all world say about my nationality : Romanian , I want to show what and romanians can , they can do very much if have with who , the CA is very good because have a console where you see all feedback from your code ,don't try .pdf books or something like that because you will only learn , not practice .
Hi,
Of course you are not stealers, etç... people who say that are stupid, don´t you think?
About the code, I think there was a misunderstending,
If you go to http://www.mybb.com/ you can see that you can click on the header (image/banner) and not only the logo (myBB) and that´s what I want to do...
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
I'm sorry but this I really don't know I helped you with what I can .
Don't talk about me I'm stealer , just my nationality
Don't talk about me I'm stealer , just my nationality
Re: Help to make the forum look like this
candy_fear wrote:I'm sorry but this I really don't know :(I helped you with what I can .
Don't talk about me I'm stealer , just my nationality
Thank You
,dArkRay- Forumember
- Posts : 98
Reputation : 1
Language : English | Portuguese
Re: Help to make the forum look like this
Topic Solved & Locked
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» Is there a way I can make it so only I, an admin, can make threads in a specific forum?
» 2 Questions: How to make forum opaque? How to center the forum buttons?
» How to make a forum inside a forum?
» Can't make new forum after deleting last forum
» Cannot make a forum
» 2 Questions: How to make forum opaque? How to center the forum buttons?
» How to make a forum inside a forum?
» Can't make new forum after deleting last forum
» Cannot make a forum
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum