How to make text align to the left throughout site [SOLVED]

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

How to make text align to the left throughout site [SOLVED]

Postby Rocket Axxonu » April 6th, 2018, 12:43 pm

Hey there!

I'm still pretty new on this site, and even though I've done some experimenting around with modifying the template for the site for my comic, there was still one thing I couldn't quite figure out.

The template I'm using is 'Kingly Grunge,' and seems to automatically set all text to 'centered' rather than to the normal left-aligned seen on most websites. I've figured out how to code each one of my individual comments to be left-aligned
Code: Select all
<p align="left">[TEXT]</p>

but it's a little clunky to do every time, and of course doesn't affect reader comments. (Not to mention when the comments show up on the comic's profile on Smack Jeeves, the coding appears as I put it in, which just looks messy.)

Is there a way I can make the default for all comments (my news posts, author's comments, comic summary, reader comments, etc.) throughout the site default to left-aligned? (Then manually center the things I want centered?)

I found this bit of code on a forum:
Code: Select all
div {
    text-align: left;
}


I didn't know if this might be it, but if it is, I couldn't find where to put it to make it work on the site. (I've tried reading up on a little coding, but I really don't know much, so it's mostly been trial and error based on solutions that seemed to work for other people.)

If it's helpful, here's the code I'm using for my site (Overall Layout), with the modifications I've made:

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
{PAGE_TITLE} :: {SITE_NAME}</title>
{SOCIAL_META_TAGS}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="http://www.smackjeeves.com/templates/kingly_grunge/style.css?v=2" rel="stylesheet" />
<style>
body
{
   background:black url(https://i.imgur.com/LFi6fgK.jpg) fixed no-repeat top center ;
}

html, body {
   font-family: Arial, 'Berlin Sans FB', sans-serif;
}

p {
    font-size: 1.25em; /* 14px/16=0.875em */
}



</style>


</head>

<body>

<center><img src="https://preview.ibb.co/nCXsRH/top_banner_DR2.jpg"></center>

<div id="menu" style="margin: 0 auto; width: 900px; background: #000;">


{MENU}
</div>

<table width="1024" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
   
   <td valign="top">
   
      <div id="container" align="center">
         {CONTENT}      
      </div>
      
   </td>
   <td valign="top">
   
      <div id="sidebar2" align="center">
      
         <h1>S Y N O P S I S</h1>
         
            <p align="left">[An Avatar AU set after Book 2.]<br>
<br>
Aang, embittered after the fall of Ba Sing Se and the following years of war, is sent to another world, in which he has to relive the the same events of his life again. Only this time he must fight alongside the downtrodden Fire Nation with siblings Zuko and Azula, against the warlike Water Tribes. <br>
<br>
[A series of scenes adapted from Ogro's fanfiction <i>Distorted Reality</i>.]</p>
<br>         
         
         
         <h1>L i n k s</h1>
         
            Ogro's <a href="https://www.fanfiction.net/s/3952155/1/Distorted-Reality">Distorted Reality</a><br>
            Comic on <a href="https://axxonu.deviantart.com/gallery/61772460/Avatar-Distorted-Reality-Comics">Deviantart</a><br>
      
      
<h1>c r e d i t s</h1>
           <center>
         Site Design by <a href="http://www.smackjeeves.com/profile.php?id=6601" title="KINGV">kingv</a><br>
         Hosted by <a href="http://www.smackjeeves.com" title="Smackjeeves">Smackjeeves</a>
Original fanfiction by <a href="https://www.fanfiction.net/u/1209284/Ogro">Ogro</a>
Azula design by <a href="https://stasysolitude.deviantart.com/">StasySolitude</a>
         </center>
      </div>

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

</body>
</html>



If anyone could help me out on this, I'd appreciate it! Thanks! (Love this site!)
Last edited by Rocket Axxonu on April 7th, 2018, 2:16 am, edited 1 time in total.
User avatar
Rocket Axxonu
 
Posts: 2
Joined: February 3rd, 2018, 12:46 pm

Re: How to make text align to the left throughout site

Postby eishiya » April 6th, 2018, 3:47 pm

The centering is done as part of the template's CSS, so all you need to do is override that CSS.

If you don't already have a <style> element in the <head> of your Overall Template, then add one:
Code: Select all
<style>

</style>

(Put it right before </head> (note the slash denoting the end of the head element).

Your CSS goes in there, between the two style tags. However, the general CSS you provided will probably not override the template's CSS, because "div" is less specific than the selectors used in the original CSS. You'll need to override them more specifically.

The comment selector is .authorcomments. The sidebars are #sidebar, #sidebar2, #container.

So, the CSS you want is putting text-align: left on all of those selectors:
Code: Select all
.authorcomments, #sidebar, #sidebar2, #container {
text-align: left;
}


That will still leave the items under "Credits" in the right sidebar centered, because for some reason, those are in a <center> element. If you want to fix that, go into Overall Layout, and find "C r e d i t s" (with the spaces; use ctrl+f to make your life easier, there's a lot of code there). Under that, you'll find some code enclosed in <center> </center>. Remove those center tags around the code and that should fix it.
Image
User avatar
eishiya
 
Posts: 9394
Joined: December 5th, 2009, 11:17 am

Re: How to make text align to the left throughout site

Postby Rocket Axxonu » April 7th, 2018, 2:15 am

Wow, you are amazing, I can't thank you enough. (That actually also helped me on something else I'd been trying to do, in resizing the font from the original template. I'd found code to enlarge the font, but it was only affecting certain areas, not user comments or archive page numbers and such. I see where this gives you control over which areas of the site are affected by a lot of different kinds of modifications.) I think I'll probably want to keep the headings for links centered, but I see what you mean, that's very helpful, and I can see how I'll center anything else that needs centering.

Thanks again, you are honestly a lifesaver.
User avatar
Rocket Axxonu
 
Posts: 2
Joined: February 3rd, 2018, 12:46 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 6 guests