Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Making a "front page"
#
Hi,

I'm in the middle of creating a new skin for my site, and I've seen this thing on sites before, where they have a sort of front page presenting the board. I don't mean an actual php-page of it's own, but it looks like it's made with CSS so that a sort of banner (or some css) takes up all of the screen first, and when scrolling down the board appears. Obviously I can make the content part, and I have, but is there a way to make sure that it applies to all screen sizes, so that everyone has to scroll down in order to see the categories and so on? Right now I'm simply using a lot of "margin-top" to get the board-content below the screen-size of my computer, and it looks great with this welcoming message taking up the screen, so I'm just curious as to if it's possible to do something that will ensure that everyone has this experience regardless of what size their computer is. I tested it on another computer size and the banner sort of inched it's way up, because the screen was larger than the one I coded the skin on. So... any way of doing this? http://files.b1.jcink.com/html/emoticons/unsure.gif
PM
#
I don't know if you mean the Unreal Portal or just a "header" kind of thing that spans the whole page. If you want the Unreal Portal, enable this in System Settings > General Configuration.

If you want a header that spans the entire page, do this in your css:

CODE
width: 100%;
height: 100%;
margin: 0px;


This will make the top bit 100% of the page and the margins at 0. Obviously you can change this margin if you would like. If you do not want it to be 100% (say you have a topbar) use the calc function like so:

CODE
width: 100%;
height: calc(100vh - ##px);
margin: 0px;
margin-top: ##px;

#
That should do it for you, but I just wanted to drop in with a little tip. If you want to do more research about this technique on your own, I believe it's usually called a "hero image"

signature
#
Cool! Thanks a lot!

Can any of you figure out why I'm not able to use the stylesheet to style this, though? As soon as I put the html elements above the <% BOARD HEADER %> and wrapper, the styling stops working. It works if I do it <div style="">-style within the board wrappers, but obviously this will make the code super long and complicated to look at. I've checked that I have the right stylesheet connected - and it works if I for instance go and change the background-color of the body and so on, but for some reason it won't work for my new html-tags. And when I do the styling inside the boardwrapper, some stuff wont work. For instance "float: left" simply does nothing, while it works to put the tags inside a table.
Any suggestions? Would much prefer to do it all in the stylesheet, as it becomes sort of exhausting having to for instance style every single link, as it now turns blue, because it's not reacting to the styling in the stylesheet (and yes, I double checked that the html-tags and styling have the same class names). http://files.b1.jcink.com/html/emoticons/blink.gif
PM
#
How exactly are you implementing things? We really need specific codes/steps. You should be able to put all of the CSS you need in your stylesheet.

signature
email: admin@jcink.com :: blog: John C.
#
So, basically I've created two boxes I want on top of the wrapper - so that the actual board is displayed when scrolling down. This is instead of having a banner at the top of the page. I can't put it inside the wrapper, because the wrapper has a background-color, and I want the boxes to be displayed on the background-picture of the body. So, what I wanted to do was insert this (I've just quickly wrote this part up, since it's not working and therefore not in my code) :

CODE

<div id=“welcomebannerbox”>
<div class=“welcomebannerboxone">box 1</div>
<div class=“welcomebannerboxtwo”>
<div class="welcomelogo">Site Name</div>
<div class="welcomeregisterbox">text here</div>
<div class="welcomeloginbox">text here</div>
</div>
</div>


and then the css is looking like this:

CODE

#welcomebannerbox {
width: 950px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 150px;
margin-bottom: 140px;
}

.welcomebannerboxone {
width: 400px;
height: 350px;
background-color: #FFF;
margin-right: 20px;
opacity: 0.8;
float: left;
}

.welcomebannerboxtwo {
width: 500px;
height: 300px;
margin-left: 20px;
float: left;
}

.welcomelogo {
font-family: 'Pacifico', cursive;
font-size: 60px;
color: #FFF;
text-shadow: -3px 0px 2px rgba(0, 0, 0, 1);
word-spacing: -2px;
border-bottom: 1px solid #fff;
width: 470px;
height: 90px;
margin-top: 70px;
margin-bottom: 10px;
}

.welcomeregisterbox {
width: 225px;
height: 100px;
background-color: #FFF;
opacity: 0.8;
margin-right: 5px;
text-align: center;
padding: 25px;
box-sizing: border-box;
font-family: arial, sans-serif;
color: #000;
font-weight: 100;
text-transform: uppercase;
font-size: 10px;
float: left;
}

.welcomeloginbox {
width: 225px;
height: 100px;
background-color: #FFF;
opacity: 0.8;
margin-right: 5px;
text-align: center;
padding: 25px;
box-sizing: border-box;
font-family: arial, sans-serif;
color: #000;
font-weight: 100;
text-transform: uppercase;
font-size: 10px;
float: left;
}


None of this is working. Not even changing the background-colors or anything. Instead what I've had to do is this very old school html in the board wrapper. I've put this right below the body-tag, which is also where I tried to put the html I wrote above, which didn't seem to want to communicate with the css.

(sorry it's messy... It sort of becomes that way when every styling is made in the html)
CODE
<div id=“welcomebannerbox” style="width: 905px; margin-right: auto; margin-left: auto; text-align: center; margin-top: 150px; margin-bottom: 140px;">
<center>
<table>
<tr>
<td><div class=“welcomebannerboxone” style="width: 400px; height: 350px; background-color: #FFF; margin-right: 20px; opacity: 0.8;">test</div></td>

<td><div class=“welcomebannerboxtwo” style="width: 500px; height: 300px; margin-left: 20px;">
<div style="font-family: 'Pacifico', cursive; font-size: 60px; color: #FFF; text-shadow: -3px 0px 2px rgba(0, 0, 0, 1); word-spacing: -2px; border-bottom: 1px solid #fff; width: 470px; height: 90px; margin-top: 70px; margin-bottom: 10px;">Site title</div>
<table>
<tr>
<td><div style="width: 225px; height: 100px; background-color: #FFF; opacity: 0.8; margin-right: 5px; text-align: center; padding: 25px; box-sizing: border-box; font-family: arial, sans-serif; color: #000; font-weight: 100; text-transform: uppercase; font-size: 10px;">text.
<div style="color: #b29792; font-size: 18px; font-family: 'Raleway', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 5px; margin-bottom: 5px;">text</div>

</div></td>

<td><div style="width: 225px; height: 100px; background-color: #FFF; opacity: 0.8; margin-right: 5px; text-align: center; padding: 25px; box-sizing: border-box; font-family: arial, sans-serif; color: #000; font-weight: 100; text-transform: uppercase; font-size: 10px;">text.
<div style="color: #b29792; font-size: 18px; font-family: 'Raleway', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 5px; margin-bottom: 5px;">text</div>

</div></td>
</tr></table>
</div></td>

</tr></table></center>
</div>



PM
#
So. This might have absolutely nothing to do with this, but HTML is really finicky, and I noticed that you have "smart quotes" quotation marks in your code. Have you tried like this?:

CODE

<div id="welcomebannerbox">
<div class="welcomebannerboxone">box 1</div>
<div class="welcomebannerboxtwo">
<div class="welcomelogo">Site Name</div>
<div class="welcomeregisterbox">text here</div>
<div class="welcomeloginbox">text here</div>
</div>
</div>


Sometimes, if you're working on the code in Microsoft Word especially, the processor will automatically substitute the "smart quotes" instead of the normal ones and it messes up the code.

This post has been edited by KatyDid: Oct 20 2016, 12:49 AM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll