.: 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 THEWesMolebash » February 12th, 2015, 9:41 pm

EISHIYA!

Seriously.

You're the best.
User avatar
THEWesMolebash
 
Posts: 12
Joined: February 4th, 2015, 8:31 am

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

Postby Oly-RRR » February 18th, 2015, 5:02 pm

This is brilliant! :mrgreen: Installed it on both comics (a bit sloppily for now but I'll tune stuff more later). Thank you!

I have a question (and it's probably a stupid question, sorry! :) ) - is there a way to make icons in comments NOT turn into circles at all during hovering? Or did I misunderstand it and
Code: Select all
-webkit-transition: all 4s;
transition: all 4s;

meant removing transitions with any timing, not only 4s?

I'm still figuring out the amount of animations I want, turns out icons might be the only thing that bugged me since many square icons look odd as circles.
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1906
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

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

Postby eishiya » February 18th, 2015, 5:07 pm

Oly: I'm not sure if I understand your question correctly. If you want to make it so that avatars are always square and never have the circle effect, find this CSS:

Code: Select all
.avatar {
    border-radius: 100%;
    box-shadow: 10px 5px #d7ea6d;
    margin: 15px;
}


and remove/comment out the border-radius: 100%; line. Alternatively, you could change the 100% to a (much) lower number to give the avatars rounded edges that fit with the rest of the layout without turning them into circles/ovals.


If you want to get rid of the avatars changing from being rounded to turning into squares, find and remove/comment this CSS:
Code: Select all
 .comment:hover .avatar {
          border-radius: 0%;
}

If you get rid of the border-radius line entirely above, you might as well get rid of this code too since it would be redundant.
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

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

Postby Oly-RRR » February 18th, 2015, 5:22 pm

eishiya wrote:Oly: I'm not sure if I understand your question correctly. If you want to make it so that avatars are always square and never have the circle effect, find this CSS:

Code: Select all
.avatar {
    border-radius: 100%;
    box-shadow: 10px 5px #d7ea6d;
    margin: 15px;
}


and remove/comment out the border-radius: 100%; line. Alternatively, you could change the 100% to a (much) lower number to give the avatars rounded edges that fit with the rest of the layout without turning them into circles/ovals.


If you want to get rid of the avatars changing from being rounded to turning into squares, find and remove/comment this CSS:
Code: Select all
 .comment:hover .avatar {
          border-radius: 0%;
}

If you get rid of the border-radius line entirely above, you might as well get rid of this code too since it would be redundant.

I wanted to keep squares from turning into circles but your idea to lower the % looks much better! Thank you! :mrgreen:
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1906
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

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

Postby Falconer » February 18th, 2015, 8:27 pm

Thanks for answering questions Eishiya. :)

To clarify, the transition property affects the animation from one state to the next. Eliminating the transitions lets it "jump" from one state (non-hover) to the next (hover) and vice versa instead of a smooth, gradual change.

Border-radius determines the roundness of corners on an object, with 100% being a circle and 0% being a square. You can also set them to anything in between!
Image
Image
User avatar
Falconer
 
Posts: 1050
Joined: April 17th, 2006, 4:09 pm

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

Postby Oly-RRR » February 18th, 2015, 8:51 pm

Falconer wrote:To clarify, the transition property affects the animation from one state to the next. Eliminating the transitions lets it "jump" from one state (non-hover) to the next (hover) and vice versa instead of a smooth, gradual change.

Border-radius determines the roundness of corners on an object, with 100% being a circle and 0% being a square. You can also set them to anything in between!

Thank you for the explanation! :D I'm new to this (in fact it's probably the first big thing I ever did to CSS in templates) so sometimes I know I want some effect changed but have no clue about the options (so really I'm only good at following instructions/examples). Turns out I actually like animations themselves, I just didn't like the circle shape.

So chuffed with how my pages look now, going to keep tweaking it all along the way! :)
Image
My problem would rock your world. - Sam Tyler
User avatar
Oly-RRR
 
Posts: 1906
Joined: August 20th, 2012, 6:36 pm
Location: here for the music

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

Postby CoffeeGirl » July 6th, 2015, 4:16 am

I can't seem to change the Header image (the circle one) There doesn't seem to be a spot for me to insert a URL for an image. Am I just overlooking it? I've read through the whole thing a few times, HELP!
User avatar
CoffeeGirl
 
Posts: 1
Joined: June 11th, 2015, 11:15 pm

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

Postby eishiya » July 6th, 2015, 6:11 am

CoffeeGirl wrote:I can't seem to change the Header image (the circle one) There doesn't seem to be a spot for me to insert a URL for an image. Am I just overlooking it? I've read through the whole thing a few times, HELP!

In the CSS in Overall layout, there's a section called "HEADER ICON". Change the background there:
Code: Select all
background: url("http://delusioninabox.com/sj/sample-icon.png");

Replace the URL with your own.
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

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

Postby theape » August 12th, 2015, 11:49 pm

I am totally lost on how to change the images :oops:
User avatar
theape
 
Posts: 1
Joined: July 30th, 2012, 10:02 pm

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

Postby eishiya » August 13th, 2015, 8:48 am

theape wrote:I am totally lost on how to change the images :oops:

There are detailed instructions on the first page of this thread. All of the images are defined in the CSS. Upload your custom images somewhere, and change the appropriate URLs to the URLs of your images. The instructions describe where each image's URL is set.
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

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

Postby PeriwinkleFluff » October 21st, 2015, 10:16 am

I SUUUUUCCCKK SOO BAAAADDDD.

I'm trying to follow the instructions... but I am at an utter lost of WHERE to go to change the different things like the stock header image. I'm using ctrl+f on the pages to look for the specific text and It just doesnt seem to be working. UHRRRGG!!

Image

I know that it has to be in here somewhere... but All the different pages I select don't seem to have the text that's in the tutorial? I am SO confused.
PeriwinkleFluff
 
Posts: 4
Joined: October 21st, 2015, 6:38 am

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

Postby eishiya » October 21st, 2015, 11:02 am

PeriwinkleFluff wrote:I SUUUUUCCCKK SOO BAAAADDDD.

I'm trying to follow the instructions... but I am at an utter lost of WHERE to go to change the different things like the stock header image. I'm using ctrl+f on the pages to look for the specific text and It just doesnt seem to be working. UHRRRGG!!

http://i.imgur.com/utssuyd.jpg

I know that it has to be in here somewhere... but All the different pages I select don't seem to have the text that's in the tutorial? I am SO confused.

You don't suck!
It's because when Admin added the template as one of the defaults, he moved all of the CSS from the Overall Layout into a separate file, so the text is not there anymore! Falconer's instructions apply to the template as she has given it in this thread, not to how it is provided by SJ. It's not her fault, or your fault that the instructions aren't working for you.

To modify the CSS on the SJ-version of this template, you need to override it. This requires some knowledge of CSS to do, but only the basics:
CSS consists of "rules", grouped by "selectors". The selectors determine what the rules get applied to (e.g. all images, the header, the comments, etc). CSS is structured like this:
Code: Select all
selector {
property: value;
property: value;
}

The "property: value;" bits are rules. You can have any number of rules per selector.
Note the {curly braces}, they make sure that it's clear which rules go to which selector by enclosing the rules.

If you look at the instructions for this template, you'll find that all of them deal with a particular selector (or a small number of selectors) and their rules. To override the CSS (which you can't modify because it's in a separate file that you have no access to), you will need to write your own CSS that uses the same selectors, but has the different rules that you want. The way CSS works, the rules closest to the element override the rules furthest away from it. So, if you put your CSS code below the original code (or in this case, below the link to the original code), it will override the other CSS whenever there would be a conflict (two rules affecting the same thing). You only need to override the CSS you want to change. For example, if you just want to change the background image for the header, you don't need to touch anything else about the header:

Code: Select all
header {
background-image: url("your new URL here");
}

(Falconer used the backround property to define the image, colours, etc all in one rule. It's a CSS shorthand, which I don't recommend using if you're not yet familiar with CCSS. If you were to use "background", you'd need to copy and paste all the other parts of its value, not just the part you want to change.)

Note that the header image "changes" if you hover over it. In the default layout, it's not noticeable because it changes to the same image. So, you need to change it there too, so your "complete" code would be:
Code: Select all
header {
background-image: url("your new URL here");
}

header:hover {
background-image: url("your new URL here");
}


If you're changing multiple selectors in exactly the same way, you can group them into one bit of code, by listing both selectors, separated by commas:
Code: Select all
header, header:hover {
background-image: url("your new URL here");
}



Also, in case you're not sure where to put this code: It goes in your Overall layout. Find the line that says "</head>", and right before it add:
Code: Select all
<style>
your CSS code in here
</style>
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

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

Postby lazy-lil-king » October 21st, 2015, 2:12 pm

Hello! I've used this template for a while, and it was just brought to my attention that there's no +fav button! :O how can I add one?
User avatar
lazy-lil-king
 
Posts: 3
Joined: April 2nd, 2014, 12:42 pm

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

Postby eishiya » October 21st, 2015, 2:52 pm

lazy-lil-king wrote:Hello! I've used this template for a while, and it was just brought to my attention that there's no +fav button! :O how can I add one?

Code: Select all
<a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}">+Fav</a>


Put that wherever you want it to make a +Fav link. You can change the text, make it an image, whatever you want. I usually add it to the menu, after the auto-generated part.
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

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

Postby PeriwinkleFluff » October 25th, 2015, 4:32 am

I... I am an artist... not a coder. I tried figuring out where to copy and paste code and putting in my new image links.. but It wasn't working. I was supposed to paste it in the overall layout, correct?

grumblleee... well uhm. Here is the code I tried putting together:
Code: Select all
header {
background-image: url("http://i.imgur.com/lzHYfgG.png");
}

header:hover {
background-image: url("http://i.imgur.com/YkLsFDd.png");
}


and just... I also wanted to darken the background grey image so it wasn't so bright. And that's like IT. So I made an image of the same file type and size and such. >> http://i.imgur.com/fOo0C4C.png

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! >_<
PeriwinkleFluff
 
Posts: 4
Joined: October 21st, 2015, 6:38 am

PreviousNext

Return to Template Submission

Who is online

Users browsing this forum: No registered users and 1 guest

cron