Replacing Images in Sketchbook Template

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

Moderator: Help Desk Team

Replacing Images in Sketchbook Template

Postby MouseWithADinosaurTail » March 6th, 2019, 5:16 pm

Hey, quick question. How do I replace the default images in the sketchbook, such as the pencils, with my own images? I'd rather not create and upload a whole new CSS, but I can't seem to figure out exactly how the override would work. Can anyone help? Thank ye!
User avatar
MouseWithADinosaurTail
 
Posts: 12
Joined: July 14th, 2018, 10:54 pm

Re: Replacing Images in Sketchbook Template

Postby eishiya » March 6th, 2019, 5:19 pm

Your overrides would go in a <style> element in your Overall Template. Any CSS you add there will override the default CSS, and any rules you don't override will remain as-is.
Image
User avatar
eishiya
 
Posts: 9830
Joined: December 5th, 2009, 11:17 am

Re: Replacing Images in Sketchbook Template

Postby MouseWithADinosaurTail » March 6th, 2019, 5:34 pm

Can you give an example of exactly what it would look like? Becuase I've been kinda trying to do this without success. ;u;
User avatar
MouseWithADinosaurTail
 
Posts: 12
Joined: July 14th, 2018, 10:54 pm

Re: Replacing Images in Sketchbook Template

Postby eishiya » March 6th, 2019, 6:16 pm

Sure. Override for the pencils in the header:

Code: Select all
header #top-left-image {
background: url(your-new-image-URL-here);
}
header #top-right-image {
background: url(your-new-image-URL-here);
}


Or, a different override to remove the pencils entirely:
Code: Select all
header #top-left-image, header #top-right-image {
background: none;
}


As you can see, these are just CSS snippets with a selector (e.g. "header #top-right-image" for the right pencil) and the rules that apply to the element(s) that match the selector (changing/removing the background image in this case).


Any/all the overrides would go in a <style> element in Overall Layout. The best place for <style> is right at the end of the <head> element, so right above
Code: Select all
</head>

(note the / in there, which signifies the end of the head element).
Image
User avatar
eishiya
 
Posts: 9830
Joined: December 5th, 2009, 11:17 am

Re: Replacing Images in Sketchbook Template

Postby MouseWithADinosaurTail » March 6th, 2019, 6:24 pm

YO that worked, thanks so much! Just one more question, terribly sorry. ;v; It seems like the new image I put in there is constrained to the original pixel height and width of the pencil image. Is there any way to get rid of those constraints so the full image can be seen?
User avatar
MouseWithADinosaurTail
 
Posts: 12
Joined: July 14th, 2018, 10:54 pm

Re: Replacing Images in Sketchbook Template

Postby eishiya » March 6th, 2019, 7:09 pm

Of course! You'd just need to override the relevant properties (the width and height of the elements, in this case). Rather than providing the code, I'll leave it as an exercise for you so you can hopefully get a better feel for how this stuff works. The selectors are the same, so you should be able to just add "width" and "height" rules to them.

If you Inspect the elements, you can see all the rules that affect them, and even play with them if you want, so you can see which rules you'll need to override.
Image
User avatar
eishiya
 
Posts: 9830
Joined: December 5th, 2009, 11:17 am

Re: Replacing Images in Sketchbook Template

Postby MouseWithADinosaurTail » March 6th, 2019, 7:32 pm

Noted! I'm taking a look at the CSS, and I think I can figure it out. :3 It's pretty straightforward once you get how it works. Thanks a bunch, Ei! You're always very helpful!
User avatar
MouseWithADinosaurTail
 
Posts: 12
Joined: July 14th, 2018, 10:54 pm


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 3 guests