Page 1 of 1

In Silence Template Questions

PostPosted: July 5th, 2017, 3:45 pm
by LightEclipse
So, um... I have some questions for the In Silence Template.
I am working on customizing the template for my comic, and I have some questions about the coding:

1. How can I make the Custom Page background transparent to the grey background, instead of white like this?: http://auraoflight.smackjeeves.com/Aura ... haracters/

2. Is there any way I can change the font for the titles and other things?

Those are the only questions I have currently. The background question I saw, but no one replied to it, so yeah.
Please help!

Re: In Silence Template Questions

PostPosted: July 5th, 2017, 4:12 pm
by eishiya
To get rid of the white background on just custom pages, go to the Custom Page section of the template, and find this line:
Code: Select all
   <div class="textcontent">

Replace it with:
Code: Select all
   <div class="textcontent" style="background: none;">


To change the fonts, just add the relevant CSS rules in a <style> element in Overall Layout. Add the <style> element between these two lines:
Code: Select all
<link href="http://www.smackjeeves.com/templates/in_silence/style.css?v=2" rel="stylesheet" />

</head>

i.e.:
Code: Select all
<link href="http://www.smackjeeves.com/templates/in_silence/style.css?v=2" rel="stylesheet" />

<style>
/* custom CSS here */
</style>

</head>


Any CSS you add there will override the default CSS (which is in that http://www.smackjeeves.com/templates/in ... le.css?v=2 file). You can also take a look at this file for reference, to see what fonts are used where, etc.

Re: In Silence Template Questions

PostPosted: July 5th, 2017, 8:32 pm
by LightEclipse
Thank You! ^^
But... I can't figure out the font code. I know it goes something like this:
p {
font-family: "Times New Roman", Times, serif;
}
But I don't know how to put it in.

Also, for the Characters Page, I don't know how to change the font color.

You seem like a pretty good coder. Can you please help (again)?

Re: In Silence Template Questions

PostPosted: July 5th, 2017, 8:48 pm
by eishiya
The code example you gave is CSS. It goes in that <style> element I mentioned.

Re: In Silence Template Questions

PostPosted: July 5th, 2017, 8:55 pm
by LightEclipse
I've tried many things to put the thing in the CSS, but its not working for some reason. Am I doing anything wrong?

Re: In Silence Template Questions

PostPosted: July 5th, 2017, 9:06 pm
by eishiya
Get rid of the slashes before and after the code. The /*stuff*/ in my sample code was just comment markup.

Even after you do that though, don't expect changes. Your code affects "p.serif", i.e. <p> elements with the "serif" class (<p class="serif">), but you have no such elements on the page. You probably need a different selector.

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 12:01 pm
by WildfireK
Hello!
I also have a question, if you could please help!

I have an image in a custom page, but it's wider than the little bar thingy at the top that says the name of the custom page - therefore, the image is pushed to the right, like this:

Image

I don't want to resize it, because I want it symmetrically sticking out on both ends evenly, if you can grasp what I'm talking about :3
I've tried stuff like <img align="center"> and stuff like that, but it doesn't work. It seems there's something in the header thing that's overriding it.
Do you know how to fix this? Thanks! :3

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 12:53 pm
by eishiya
It's not centering because it's trying to center in a container that's narrower than it, so there's just nowhere to go.

It's a bit hacky, but the usual trick around this situation is to put the image in a container, use float to put it outside of regular page flow (so that it's no longer bound by the width of the container it's normally in), and use right: 50% on the container and right: -50% on the image to center it.

Code for this:
Take your
Code: Select all
<img src="https://s1.postimg.org/7n8v4lr6n/Lynxstar_s_Tyranny_Map.png" align="middle">

Replace with
Code: Select all
<div class="centerimage"><img src="https://s1.postimg.org/7n8v4lr6n/Lynxstar_s_Tyranny_Map.png"></div>

And add this CSS to where the rest of your CSS is:
Code: Select all
.centerimage {
   position: relative;
   float: right;
   right: 50%;
}
.centerimage img {
   position: relative;
   right: -50%;
}

You can now also put the <div class="centerimage"> container around any other large image that you need centered and it should work.

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 1:10 pm
by WildfireK
Okay!
Got it!
Thanks so much :3

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 3:30 pm
by eishiya
Does it work for you? Your changes aren't centering it for me and I can't get it to center. Did you change something else while making the edits?

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 7:23 pm
by WildfireK
Nope, I didn't change anything else...
It doesn't work for me, but doing what you did for the first one except adding "left" instead of right makes it pushed to the left instead of the right...

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 8:04 pm
by eishiya
Very odd. It worked in testing, and I'm pretty sure the code I gave you was the only stuff I added. The code is also just about identical to code I use on my own site, and I couldn't find what's interfering with it.

Here's an alternate solution that's not as flexible (requires knowing the height for each image). This code replaces everything from before.
HTML:
Code: Select all
<div class="centerimage" style="height: 1061px;">
   <img src="https://s1.postimg.org/7n8v4lr6n/Lynxstar_s_Tyranny_Map.png">
</div>

CSS:
Code: Select all
.centerimage img {
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
}


Note the required height in the DIV. I put it in the style attribute on the DIV because it's different for each image.


As a different solution, although you said you don't want to resize the image, I think it actually looks better being smaller. Setting "width: 100%;" on the image automatically resizes it to fit within its container, and yours has large enough text and sufficiently low detail that it looks just fine resized. And of course, that avoids this whole centering issue xP

A yet alternate solution would be to change the HTML on your extra pages so that the wrapper doesn't set the width. This basically means everything gets centered in the entire width of the page, the container is never too narrow. No cheap tricks required for centering.
Code: Select all
.wrap {
width:auto;
}
.title {
width: 700px; /*make the titles set their own width */
}

This might break some other pages. I think the other pages set other widths for other elements so it should be fine though. Or, you could set this HTML on just the extra pages - not standards-compliant, but avoids breaking other pages.

Re: In Silence Template Questions

PostPosted: August 11th, 2017, 8:20 pm
by WildfireK
Woah that's a lot of solutions

Yeah, thanks! I also have a characters page with wide images so resizing might make it look a little grainy...

But I will try these!
Thanks so much for doing this! :3

Re: In Silence Template Questions

PostPosted: August 13th, 2017, 4:04 am
by The_Hankerchief
I'm only commenting to bookmark this thread; I may need it later. Thanks, eishiya!

Re: In Silence Template Questions

PostPosted: September 1st, 2017, 4:31 pm
by LightEclipse
If you could be so kind, I have another question.

For the overall layout, how can I change the grey in the background to a darker grey?

Also, is there anyway I can incorporate the Kingly Grunge boxes on the side into my In Silence template?