Page 1 of 1

Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 5:16 pm
by MouseWithADinosaurTail
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!

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 5:19 pm
by eishiya
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.

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 5:34 pm
by MouseWithADinosaurTail
Can you give an example of exactly what it would look like? Becuase I've been kinda trying to do this without success. ;u;

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 6:16 pm
by eishiya
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).

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 6:24 pm
by MouseWithADinosaurTail
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?

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 7:09 pm
by eishiya
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.

Re: Replacing Images in Sketchbook Template

PostPosted: March 6th, 2019, 7:32 pm
by MouseWithADinosaurTail
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!