.: Streamlined :. responsive, animated, & easy to use

Have a Smack Jeeves template you'd like to share with the community? Post it here!

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » October 25th, 2015, 11:28 am

PeriwinkleFluff wrote:IDEALLY, I would like it if someone would just take the the whole page code in whatever template page and input what I want to change INTO the page, and I'd just copy and paste the whole thing OVER what the default is. I know it sounds like a waste of space but that is most likely the only way I'm going to get it right! >_<

If you want to do this, you can, actually! Just install the template according to this thread's instructions instead of using the SJ-provided version. That'll involve pasting the provided code over your template code in each of the sections, and then you'll be able to follow the thread's customization instructions exactly as well :D
It is a waste of space and bandwidth, but it's not too terrible, and if that's what it takes for you to be able to customize your site to how you want it to look, go for it.

The code you have looks correct though, and it should go in Overall Layout, like you said. Did you see the bit in my post about adding <style> tags? If not, it's at the end of my post. Maybe that's all you need?
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby PeriwinkleFluff » October 26th, 2015, 4:11 am

T-T waaahhh... I wanted to change the ICON... but instead changed the BACKGROUND behind the icon. I can't do anything riiiiighttt xD ...my goodness..

This is the comic - so you can see my tragic failing: http://mistshadow.smackjeeves.com/
PeriwinkleFluff
 
Posts: 4
Joined: October 21st, 2015, 6:38 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby PeriwinkleFluff » October 26th, 2015, 7:45 am

Oh. I have another HILARIOUS problem.

I'm uploading gifs, so the images are animated.

Now - The comic preview on the homepage is animated. That was not my intention.

I noticed that the archive page link does not seem to be animated as has a still preview (Is that because of the spin effect?).
PeriwinkleFluff
 
Posts: 4
Joined: October 21st, 2015, 6:38 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » October 26th, 2015, 9:32 am

PeriwinkleFluff wrote:Oh. I have another HILARIOUS problem.

I'm uploading gifs, so the images are animated.

Now - The comic preview on the homepage is animated. That was not my intention.

I noticed that the archive page link does not seem to be animated as has a still preview (Is that because of the spin effect?).

The archive preview is a separate image generated from your page, so it's not animated at all. The preview image on the home page is just your actual comic page image, so if that's animated, the preview image will be animated also. There is no way to stop the animation via HTML/CSS that I'm aware of. If the animation bothers you and you plan to upload a lot of animated comics, then perhaps you should replace the previews with a permanent image that doesn't change with each update, and isn't animated.

By the way, I noticed on your recent page you mentioned SJ's "stupid file cap". There's a 500kb file cap for free comics, because free comics don't help SJ much with its hosting costs, and comic page images are the thing that eat up SJ's bandwidth the fastest. 500kb is more than enough for the vast majority of comics. You could get a subscription to raise your file size limit to 2MB (Donator) or 5MB (Premium), which I recommend if you have a lot of animated pages, since it'd save you a lot of hassle, reduce the chance of something going weird with your images, and help support SJ so that it can keep existing. It looks like you just took a Flash and ran it through a converter, with very little optimization for the new format, which is file the file is so big. If you make your comics as flash, just upload the SWF files instead of making GIFs and losing quality. I think you need a Donator subscription for that, but it'll look/work way better, and you can have that "Replay" button functional and everything. You may also want to warn people that your comic pages are animated in the comic's description, if you haven't already.
If you have a response to this part, I recommend PMing me, so that we don't derail this topic.


Edit: Just saw your post above. You said header image, so I thought that's what you meant xP Just change the header { to .headIcon { and get rid of the header:hover { part entirely. Or, change the header:hover part to .headIcon:hover if you want it to change on hover.
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Oly-RRR » October 26th, 2015, 7:07 pm

Speaking of being animated...

There's something really odd in the way pages in my comic archive jump about in BOTH my comics when you scroll over them but honestly I suspect it's me chucking out more animation code than I meant before I decided I wanted some animation after all and I feel bad asking anyone to look at it before I look at it myself and I never have the time/energy... Sorry, this sounds more like Vent thread material. :(
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1908
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » October 26th, 2015, 7:30 pm

Oly-RRR wrote:Speaking of being animated...

There's something really odd in the way pages in my comic archive jump about in BOTH my comics when you scroll over them but honestly I suspect it's me chucking out more animation code than I meant before I decided I wanted some animation after all and I feel bad asking anyone to look at it before I look at it myself and I never have the time/energy... Sorry, this sounds more like Vent thread material. :(

As far as I can tell, things jump around because the number and title get replaced by the date and comment count, which have a different length to the number+title, and thus cause the pages to be split up into lines differently. The issue isn't apparent in the example because the titles are all short, so the number+title and date+comments take up the same vertical space (2 lines).

It looks like the archive page wasn't designed with long page titles in mind. It uses float: left to make things order into rows automatically depending on the size of the window, but that method is icky when dealing with elements of differing heights, which is why you have those unsightly gaps in your archive page, and why things jump around. This can be fixed by giving the .archive elements a fixed height that's large enough to fit most of your titles, and setting overflow: hidden to make it so that long titles don't stretch them taller.

Override CSS:
Code: Select all
.archive {
height: 300px;
overflow: hidden;
}


(Or add those lines into the CSS for .archive, if you're using the manually-installed version.)
You will probably need to experiment with the height to get it looking good, I just picked a random number. If the fixed height doesn't seem to be taking effect, then tell me and I'll experiment (float and fixed height don't always play well together).
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Oly-RRR » October 27th, 2015, 2:40 pm

eishiya wrote:It looks like the archive page wasn't designed with long page titles in mind. It uses float: left to make things order into rows automatically depending on the size of the window, but that method is icky when dealing with elements of differing heights, which is why you have those unsightly gaps in your archive page, and why things jump around. This can be fixed by giving the .archive elements a fixed height that's large enough to fit most of your titles, and setting overflow: hidden to make it so that long titles don't stretch them taller.

Thanks!!! I'll try that ASAP! :)

The thing is though - Falconer's dailies have the same template and long titles if I remember correctly, and it doesn't happen there... Anyway, I'll try the code later this week, when work and Inktober get less crazy.
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1908
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » October 27th, 2015, 3:04 pm

Oly-RRR wrote:
eishiya wrote:It looks like the archive page wasn't designed with long page titles in mind. It uses float: left to make things order into rows automatically depending on the size of the window, but that method is icky when dealing with elements of differing heights, which is why you have those unsightly gaps in your archive page, and why things jump around. This can be fixed by giving the .archive elements a fixed height that's large enough to fit most of your titles, and setting overflow: hidden to make it so that long titles don't stretch them taller.

Thanks!!! I'll try that ASAP! :)

The thing is though - Falconer's dailies have the same template and long titles if I remember correctly, and it doesn't happen there... Anyway, I'll try the code later this week, when work and Inktober get less crazy.

It doesn't have that problem because she used the exact solution that I proposed - she has the height fixed at 200px, and overflow: hidden.
I'm surprised that this isn't part of the original template code, along with a mention of how to change it to accommodate comics that aren't as tall. It makes a big difference!
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Falconer » November 11th, 2015, 12:31 pm

I keep forgetting this thread exists. Thanks Eishiya for helping people out!

eishiya wrote:
Oly-RRR wrote:
eishiya wrote:It looks like the archive page wasn't designed with long page titles in mind. It uses float: left to make things order into rows automatically depending on the size of the window, but that method is icky when dealing with elements of differing heights, which is why you have those unsightly gaps in your archive page, and why things jump around. This can be fixed by giving the .archive elements a fixed height that's large enough to fit most of your titles, and setting overflow: hidden to make it so that long titles don't stretch them taller.

Thanks!!! I'll try that ASAP! :)

The thing is though - Falconer's dailies have the same template and long titles if I remember correctly, and it doesn't happen there... Anyway, I'll try the code later this week, when work and Inktober get less crazy.

It doesn't have that problem because she used the exact solution that I proposed - she has the height fixed at 200px, and overflow: hidden.
I'm surprised that this isn't part of the original template code, along with a mention of how to change it to accommodate comics that aren't as tall. It makes a big difference!


I've made tweaks to things here and there since originally posting, but those likely did not make it in to the version admin added.

Making a note to self to update the main post later with this info.
Image
Image
User avatar
Falconer
 
Posts: 1050
Joined: April 17th, 2006, 4:09 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » November 11th, 2015, 12:39 pm

Falconer wrote:I keep forgetting this thread exists. Thanks Eishiya for helping people out!

[snip]
I've made tweaks to things here and there since originally posting, but those likely did not make it in to the version admin added.

Making a note to self to update the main post later with this info.

I see! I think if you asked, Admin would probably update the SJ version of the template. It shouldn't break anything, at least.
And it's no problem! Your template is easy to maintain even though I haven't used the template myself, because most of the code makes sense and is clean and your guide is well-written. Most of the confusion stems from the fact that SJ's version has the CSS in a separate, inaccessible file, and that seems easy enough to add in the guide. I'd recommend having two separate guides (in spoilers) though, so people can choose one or the other and not worry about reading the right thing in every section.
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Oly-RRR » November 20th, 2015, 5:06 pm

eishiya wrote:It doesn't have that problem because she used the exact solution that I proposed - she has the height fixed at 200px, and overflow: hidden.
I'm surprised that this isn't part of the original template code, along with a mention of how to change it to accommodate comics that aren't as tall. It makes a big difference!

I finally got around to do it - works at 250px for me! :D Thanks a ton, it was one of those small things that was bugging me but I didn't know where to start.
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1908
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Gelatino » December 12th, 2015, 10:38 pm

This is a really nice template! Kudos to the designer.

I've spent the last few days thoroughly butchering the template for my own needs, but I got stuck on something. I'm trying to replace the rating stars with my own custom image, but it's difficult since the stars are icons rather than images so it's not a simple replacement. I've been messing with it for a while but I can't seem to get anything to work.

Can anybody help? My comic is http://detectivecomics.smackjeeves.com/ and these are the images I would like to use:

Image
Unselected

Image
Selected

Also I would like the rating icons to be perfectly centered on the page if possible, right now they're off to the right a little. I also can't figure out how to fix that.
Gelatino
 
Posts: 2
Joined: December 8th, 2015, 10:11 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby eishiya » December 12th, 2015, 11:47 pm

Gelatino wrote:This is a really nice template! Kudos to the designer.

I've spent the last few days thoroughly butchering the template for my own needs, but I got stuck on something. I'm trying to replace the rating stars with my own custom image, but it's difficult since the stars are icons rather than images so it's not a simple replacement. I've been messing with it for a while but I can't seem to get anything to work.

Can anybody help? My comic is http://detectivecomics.smackjeeves.com/ and these are the images I would like to use:

Image
Unselected

Image
Selected

Also I would like the rating icons to be perfectly centered on the page if possible, right now they're off to the right a little. I also can't figure out how to fix that.

Instead of setting images like the usual rating star code, Streamlined sets CSS classes. You need to change the code to set your own classes, and then define those classes to look how you want.

Here's how to do it, in detail:
First, find this code (it's probably in Comic Page):
Code: Select all
var pic_unselected = "fa fa-2x fa-star-o";
var pic_selected = "fa fa-2x fa-star";

Change that to:
Code: Select all
var pic_unselected = "ratestar ratestar_unselected";
var pic_selected = "ratestar ratestar_selected";


Then, add this to your CSS:
Code: Select all
.ratestar {
width: 35px;
height: 50px;
display: block;
background-repeat: no-repeat;
background-position: center;
}
.ratestar_unselected {
background-image: url('https://dl.dropboxusercontent.com/u/113173630/web%20design/Detective%20comics/Magnifying%20glass%202.png');
}
.ratestar_selected {
background-image: url('https://dl.dropboxusercontent.com/u/113173630/web%20design/Detective%20comics/Magnifying%20glass%201.png');
}


This will give you empty space between your images though, you don't want that because it means the images will flash to unselected as you move between them. To eliminate that, find this in your CSS:
Code: Select all
.starBar li {
    display: inline-block;
    margin: 0 5px;
}

And change the margin to 0:
Code: Select all
.starBar li {
    display: inline-block;
    margin: 0px;
}

If you want more space between your images, you can change the size given for .ratestar, or add some horizontal padding to it. The images will stay centered in their box because the background is centered and not repeating.

To fix the positioning of the whole rating bar so it's centered, find this code in your CSS:
Code: Select all
.starBar {
    display: inline-block;
    list-style-type: none;
}

And add padding-left: 0px; to it:
Code: Select all
.starBar {
    display: inline-block;
    list-style-type: none;
    padding-left: 0px;
}
Image
User avatar
eishiya
 
Posts: 9863
Joined: December 5th, 2009, 11:17 am

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Gelatino » December 13th, 2015, 2:20 pm

That seemed to do the trick! Thanks a lot for your help

EDIT: okay... I seem to be having another dumb problem. I adjusted the css for my comic image, which caused it to come un-centered, so naturally I undid my changes but that didn't fix it for some reason? Now my comic image is stuck on the left and I can't get it centered, no matter what I try. This is bizarre and I need help

EDIT AGAIN: Nevermind, I got some help and it's fixed now
Gelatino
 
Posts: 2
Joined: December 8th, 2015, 10:11 pm

Re: .: Streamlined :. responsive, animated, & easy to use

Postby Foxblaze » October 24th, 2016, 4:48 pm

I've been trying to make it so the background image doesn't repeat or more specifically, make it fit the whole screen, but I can't figure out how to do it. I tried using html guides, but it seems you're using a different kind making it difficult to fix that. The closest I got was having it with a gap on the right side, but I have no idea how to stretch the image to fill that since resizing the original image doesn't work
User avatar
Foxblaze
 
Posts: 12
Joined: November 16th, 2010, 12:01 am

PreviousNext

Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest