In Silence Template Questions

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

Moderator: Help Desk Team

In Silence Template Questions

Postby LightEclipse » July 5th, 2017, 3:45 pm

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!
User avatar
LightEclipse
 
Posts: 9
Joined: June 10th, 2017, 1:44 am
Location: Everywhere and Nowhere at once

Re: In Silence Template Questions

Postby eishiya » July 5th, 2017, 4:12 pm

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.
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby LightEclipse » July 5th, 2017, 8:32 pm

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)?
Last edited by LightEclipse on July 5th, 2017, 8:53 pm, edited 1 time in total.
User avatar
LightEclipse
 
Posts: 9
Joined: June 10th, 2017, 1:44 am
Location: Everywhere and Nowhere at once

Re: In Silence Template Questions

Postby eishiya » July 5th, 2017, 8:48 pm

The code example you gave is CSS. It goes in that <style> element I mentioned.
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby LightEclipse » July 5th, 2017, 8:55 pm

I've tried many things to put the thing in the CSS, but its not working for some reason. Am I doing anything wrong?
User avatar
LightEclipse
 
Posts: 9
Joined: June 10th, 2017, 1:44 am
Location: Everywhere and Nowhere at once

Re: In Silence Template Questions

Postby eishiya » July 5th, 2017, 9:06 pm

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.
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby WildfireK » August 11th, 2017, 12:01 pm

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
I am too slow
The faces come and go
But the ones that stay awhile
Are the ones you'll never know
User avatar
WildfireK
 
Posts: 12
Joined: July 21st, 2016, 4:18 pm
Location: Lost in my own thoughts

Re: In Silence Template Questions

Postby eishiya » August 11th, 2017, 12:53 pm

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.
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby WildfireK » August 11th, 2017, 1:10 pm

Okay!
Got it!
Thanks so much :3
I am too slow
The faces come and go
But the ones that stay awhile
Are the ones you'll never know
User avatar
WildfireK
 
Posts: 12
Joined: July 21st, 2016, 4:18 pm
Location: Lost in my own thoughts

Re: In Silence Template Questions

Postby eishiya » August 11th, 2017, 3:30 pm

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?
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby WildfireK » August 11th, 2017, 7:23 pm

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...
I am too slow
The faces come and go
But the ones that stay awhile
Are the ones you'll never know
User avatar
WildfireK
 
Posts: 12
Joined: July 21st, 2016, 4:18 pm
Location: Lost in my own thoughts

Re: In Silence Template Questions

Postby eishiya » August 11th, 2017, 8:04 pm

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.
Image
User avatar
eishiya
 
Posts: 9423
Joined: December 5th, 2009, 11:17 am

Re: In Silence Template Questions

Postby WildfireK » August 11th, 2017, 8:20 pm

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
I am too slow
The faces come and go
But the ones that stay awhile
Are the ones you'll never know
User avatar
WildfireK
 
Posts: 12
Joined: July 21st, 2016, 4:18 pm
Location: Lost in my own thoughts

Re: In Silence Template Questions

Postby The_Hankerchief » August 13th, 2017, 4:04 am

I'm only commenting to bookmark this thread; I may need it later. Thanks, eishiya!
sanspants wrote:Man, I bet the NSA guys know where to find the best porn.

Sonic-ock wrote:I, the procrastination fairy, am glad to have been a positive influence on the community.
User avatar
The_Hankerchief
 
Posts: 3985
Joined: September 2nd, 2010, 1:59 am
Location: (Insert Johnny Cash's "I've Been Everywhere")

Re: In Silence Template Questions

Postby LightEclipse » September 1st, 2017, 4:31 pm

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?
User avatar
LightEclipse
 
Posts: 9
Joined: June 10th, 2017, 1:44 am
Location: Everywhere and Nowhere at once


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest