Help CSS Style help

Icewolf · June 27, 2018

I've spent the day making a new skin for the forum, but there are a few things that I am stuck on, mainly because I don't normally code things the way I want them to. I basically want to make different coloured themes for the forum but there are some things in the html template that won't change when I switch between themes, so I need to style them using css instead.

The first is that I want a css table for the side bar where I have the links. Normally I colour the background using html because it's the method I'm most familiar with, but it won't work in this case.

The second is I want to convert the styling of this post template into css rather than have it as html because it will be a pain to go around editing the colours to match the theme every time I change it and I want to keep it readable.

<div align="center" style="margin-top:-20px;"><table style="border:2px;"><tbody><tr><td><div style="width:650px;height:relative;background-color:#251F1F;padding:10px;border:#211B1B solid 10px;border-top-right-radius:200px;border-top-left-radius:50px;border-bottom-right-radius:50px;border-bottom-left-radius:50px;"><div align="center"><img style="width:645px;height:150px;border-top-right-radius:200px;border-top-left-radius:50px;" src="http://legends-of-arda.uk/images/documentimages/oie_bzhvMFNxZDsL.jpg">
<h2>A Guide to Races:</h2>
<h3>Giant Spiders</h3>
<div style="width:600px;padding:5px;font-size:12px;font-family:verdana;text-align:left;">
post here
</div><div style="margin-top:7px;"></div></div></div></td></tr></tbody></table></div>

Finally, I have a problem with the mini-profile. The styling of the profile, writer info, plot page, posts, threads and joined are all in the html template. I can change the colours of the fonts in the css but that's it. (I tried to fix it by giving it a background colour, but it doesn't fill the whole box.)

Jones · June 27, 2018

Hi! So I can't give specific mini profile or sidebar help without seeing the code. This should, overall, help you to help yourself I am hoping. Html and CSS really work best hand in hand. It's not as complicated as it initially seems, and there are tons of helpful people and articles out there. www.w3school.com is an excellent resource. If you're confident enough to write out html, you should consider versing yourself in css too. You'll be glad you did. Css rarely breaks anything! Just makes it look funny until you get it right.

You seem to have a good grasp on structuring things with html. All you really want to do is start assigning classes to these divs so that they know where in the css to look for their styling info. Basically you just want to give them a reasonably descriptive name. Then all of the style information can go in your css instead.

The html is cleaner and more legible without all the style info piled into it.

<div class="callMeAnything"> </div>

I'm not sure how familiar you are with Cascading Style Sheets syntax or what it actually does. Basically the css holds the styles for the html. A browser reads it from top to bottom, which is why it's called cascading. That is part of how it works. I won't write a whole article about it since its easily and freely available online. Main thing: You just put a period before the class name you gave your div and insert the style info between curly brackets.

.callMeAnything {
	font-size: 1rem;
	color: blue;
}

Here is your template rewritten. The css portion is at the top between <style> tags. You can cut and paste it into your css sheet, or leave it there. It'll work either way. It's also responsive for different screen sizes now. I'm not sure why you were using tables in it before? They should be easily re-integrated if you need them, though. I just hate tables and try not to use them if I can help it.

<style>
.template1 {
  margin: -20px auto;
  background-color: #251F1F;
  width: 100%;
  max-width: 650px;
  height: auto;
  border-radius: 50px;
  border-top-right-radius: 200px;
  border: #211B1B solid 10px;
  padding: 1.3%;
}

.templatepic {
  width: auto;
  max-width: 645px;
  height: 150px;
  border-radius: 50px 200px 0 0;
  margin: auto;
}

h3, h2 {
  text-align: center;
  color: ;
}

.templatebody {
  padding: 1%;
  font-size:12px;
  font-family:verdana;
  text-align:left;
  max-width: 600px;
}
</style>


<div class="template1">
  <img class="templatepic" src="http://legends-of-arda.uk/images/documentimages/oie_bzhvMFNxZDsL.jpg">
    <h2>A Guide to Races:</h2>
    <h3>Giant Spiders</h3>
      <div class="templatebody">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at ullamcorper eros.
        Vivamus convallis ac urna quis porttitor. Duis sed ante tempus, lobortis urna commodo, 
        porttitor tortor. Vivamus convallis, nisl in mollis mattis, eros lectus tempor ex, sit 
        amet vulputate ante mi imperdiet nibh. Morbi sodales odio sem, non fermentum arcu facilisis et.
        Nullam laoreet fermentum turpis et porta. Mauris suscipit velit eget ante egestas, sit amet suscipit
        tellus dictum. </p>   
      </div>
</div>

Kit the Human · June 28, 2018

Thanks @Jones for helping! Agree entirely in that you're better off avoiding tables. They just necessitate extra needless coding (compare how much you have to write compared to Jones) and they can not be responsive.

For your other questions:

Mini Profile

Find .post .post_author in your global CSS and change the background color.

For the rest of it, you need to give your divs some classes like Jones did and then take all of that inline styling and whack it into the CSS. The HTML you want to change is in postbit_classic, make sure to proof read your code, there are a couple of whoopsies in there. Give a yell if you need some additional help!

Sidebar

Are you talking about the important links block in the sidebar? I would completely redo this so that it's no longer in a table.

<table border="0" cellspacing="0" cellpadding="5" class="tborder">
<br>
<tr>
   <td class="thead">
	   <h1>IMPORTANT LINKS</h1>
   </td>
</tr>

<tr>
   <td class="trow2">
    <center><table cellspacing="5px" cellpadding="5">
	<tbody>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/showthread.php?tid=49" title="your description">Welcome</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="https://legends-of-arda.uk/mybblog.php" title="blog">Blog</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/showthread.php?tid=52" title="your description">Staff Required</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=15" title="your description">Character Sheets</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=25" title="your description">Fan Fiction</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=29l" title="your description">Site Directory</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/showthread.php?tid=53&pid=64#pid64" title="your description">Site Credits</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=32" title="your description">Help!</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=33" title="your description">Adopt a Character</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/misc.php?page=codes" title="your description">Link To</a> </td>
		</tr>
		<tr>
			<td bgcolor="#120B0A"><a href="http://legends-of-arda.uk/forumdisplay.php?fid=38" title="your description">Affiliates</a> </td>
		</tr>
	</tbody>
		</table></center>
   </td>
</tr>
</table>

Change to this:

<div class="importantlinks tborder">
  <div class="thead">
    <h1>Important Links</h1>
  </div>
  <div class="trow1">
    <a href="http://legends-of-arda.uk/showthread.php?tid=49" title="your description">Welcome</a>
    <a href="https://legends-of-arda.uk/mybblog.php" title="blog">Blog</a>
	<a href="http://legends-of-arda.uk/showthread.php?tid=52" title="your description">Staff Required</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=15" title="your description">Character Sheets</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=25" title="your description">Fan Fiction</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=29l" title="your description">Site Directory</a>
  	<a href="http://legends-of-arda.uk/showthread.php?tid=53&pid=64#pid64" title="your description">Site Credits</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=32" title="your description">Help!</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=33" title="your description">Adopt a Character</a>
  	<a href="http://legends-of-arda.uk/misc.php?page=codes" title="your description">Link To</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=38" title="your description">Affiliates</a>
  </div>
</div>

And add this to your CSS

.importantlinks {
  text-align: center;
  margin: 0 auto; /* the first number is the top and bottom margins, the auto tells the left and right margins to automatically define space so that the div is centered. */
}

.importantlinks a {
  display: block; /* display on it's own line and accept padding */
  margin: 5px auto; /* as before, 5px top and bottom margins, automatic left and right margins. Change to 5px 0 if you want the links to expand to the full width of the container */
  padding: 5px;
  background: #120B0A; /* background color */
  color: #fff; /* link text color */
}

Icewolf · June 28, 2018

Thanks a lot! I just use tables because it's how I learnt to do layouts before everyone started using css. I try to do most of it in css now, but if I don't quite know how to do something, I go back to old methods.

Morrigan · June 28, 2018

Never user tables unless you have to. Divs can be used as tables and are more responsive.

Icewolf · June 28, 2018

I've got most of it sorted out now, but there are a couple of things I need help with.

On the posting template, the image needs moving up and there's a big gap between the header tags and the main part of the post, which I'd like to close up. It never seems to look right with large gaps between things.

I want to it to look like this - http://forum.legends-of-arda.uk/showthread.php?tid=66

rather than the big gaps that are here: http://forum.legends-of-arda.uk/showthread.php?tid=63

There is a border around the important links now which I don't want - I tried removing it, (it's in the trow1 and trow2 styling) but I didn't it without the border because the board titles, etc, blend together. Is there a way of removing it without losing the border around the boards?

I've done most of the mini profile, but I can't get a block/background to go around Posts, Threads, Joined, Reputation and Warning Level.

Edited June 28, 2018 by Icewolf

Kit the Human · June 28, 2018

Try:

<div class="template1">
  <img class="templatepic" src="http://legends-of-arda.uk/images/documentimages/oie_bzhvMFNxZDsL.jpg"><h2>A Guide to Races:</h2><h3>Giant Spiders</h3><div class="templatebody">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at ullamcorper eros.
        Vivamus convallis ac urna quis porttitor. Duis sed ante tempus, lobortis urna commodo, 
        porttitor tortor. Vivamus convallis, nisl in mollis mattis, eros lectus tempor ex, sit 
        amet vulputate ante mi imperdiet nibh. Morbi sodales odio sem, non fermentum arcu facilisis et.
        Nullam laoreet fermentum turpis et porta. Mauris suscipit velit eget ante egestas, sit amet suscipit
        tellus dictum. </p>   
      </div>
</div>

(Getting rid of the spaces between the headings). If the gap is still too big:

.template1 h2 {
  margin: 5px 0; /* adjust the 5px to your liking */
}

.template1 h3 {
  margin: 5px 0; /* adjust the 5px to your liking */
}

Also get rid of any <br> tags you might have. You don't need them in posts because mybb will see where you have hit enter.

Border

<div class="importantlinks tborder">
  <div class="thead">
    <h1>Important Links</h1>
  </div>
  <div class="trow1 noborder">
    <a href="http://legends-of-arda.uk/showthread.php?tid=49" title="your description">Welcome</a>
    <a href="https://legends-of-arda.uk/mybblog.php" title="blog">Blog</a>
	<a href="http://legends-of-arda.uk/showthread.php?tid=52" title="your description">Staff Required</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=15" title="your description">Character Sheets</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=25" title="your description">Fan Fiction</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=29l" title="your description">Site Directory</a>
  	<a href="http://legends-of-arda.uk/showthread.php?tid=53&pid=64#pid64" title="your description">Site Credits</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=32" title="your description">Help!</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=33" title="your description">Adopt a Character</a>
  	<a href="http://legends-of-arda.uk/misc.php?page=codes" title="your description">Link To</a>
  	<a href="http://legends-of-arda.uk/forumdisplay.php?fid=38" title="your description">Affiliates</a>
  </div>
</div>

Add the noborder class after trow1 and in CSS

.trow1.noborder {
  border: 0;
}

Make sure to put it below the .trow1 styling in the CSS.

For the final issue

Please proof read your HTML in postbit_classic, like I said previously, there are mistakes in them, like below:

<div div class=".minipf2"><b>        Posts: Variable</b></div>		
<div div class=".minipf2"><b>		Threads: Variable</b></div>
<div div class=".minipf2"><b>		Joined: Variable</b></div>

Another example:

<div <span class="post_avatar" style="">

Once you have cleaned up the HTML, see if you're able to add the styling.

Icewolf · June 29, 2018

For the post template, I want to make the gap between the top and the image smaller. There's still too much of a gap there. I want it like it was in the original template.

I don't know what's wrong with the post bit. The style still doesn't take to it.

Kit the Human · June 29, 2018

Add

margin-top: -14px;

to the template1. It will effectively override the padding in the post area which is pushing the image down.

For the miniprofile:

<div class=".minipf2"><b>        Posts: 194</b></div>		
<div class=".minipf2"><b>		Threads: 134</b></div>
<div class=".minipf2"><b>		Joined: Nov 2016</b></div>

get rid of the dots in front of the class. minipf2 as opposed to .minipf2 It will work!

Icewolf · July 1, 2018

The profie is still not displaying as it should. I don't know what's wrong with it. This is the css code:

.minipf a { color:#FFEACC; font-weight:bold; text-transform:uppercase; display: block; background: #120B0A; padding: 5px; margin: 5px auto; width: 180px;}

.minipf a:hover {color:#BA853F; font-weight:bold; text-transform:uppercase; display: block; background: #120B0A; padding: 5px; margin: 5px auto; width: 180;}

.namepf { color:#FFEACC; font-weight:bold; font-size:25px; text-align:center; font-family:Uncial Antiqua;}

.namepf a { color:#FFEACC; font-weight:bold; font-size:25px; text-align:center; font-family:Uncial Antiqua;}

.namepf a:hover { color:#BA853F; font-weight:bold; font-size:25px; text-align:center; font-family:Uncial Antiqua;}

.smallboxtitle {width:190px; height:20px; padding-top:2px; text-transform:uppercase; color:#FFEACC; text-align:center; font-family:Verdana; font-size:12px; text-align:center; background-color:#7a9ab1; border-color:#543F25 #000000 #000000 #543F25; border-style:solid; border-width:1px;}

.smallbox {width:90px; height:15px; padding-top:2px; text-transform:uppercase; color:#FFEACC; text-align:center; font-family:Verdana; font-size:8px; text-align:center; background-color:#7a9ab1; border-color:#543F25 #000000 #000000 #543F25; border-style:solid; border-width:1px;}

.minipf2 {background: #ffffff; margin: 5px auto;}

<div class=".minipf2">{$lang->postbit_posts} {$post['postnum']}</div>		
<div class=".minipf2">{$lang->postbit_threads} {$post['threadnum']}</div>
<div class=".minipf2">{$lang->postbit_joined} {$post['userregdate']}</div>

Morrigan · July 1, 2018

Icewolf. Please re-read @Kit the Human's last post and the second part of your code.

Sign In

Help CSS Style help

Recommended Posts

Icewolf 258

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Jones

Icewolf

Posted Images

Jones 177

Link to comment

Share on other sites

Kit the Human 758

Link to comment

Share on other sites

Icewolf 258

Link to comment

Share on other sites

Morrigan 1,826

Link to comment

Share on other sites

Icewolf 258

Link to comment

Share on other sites

Kit the Human 758

Link to comment

Share on other sites

Icewolf 258

Link to comment

Share on other sites

Kit the Human 758

Link to comment

Share on other sites

Icewolf 258

Link to comment

Share on other sites

Morrigan 1,826

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Announcements

Who's Online (See full list)

Topics

RPG Resources

Activity

My Activity Streams

Community

Important Information