![]() Preview and save - tah-dah! theme images up to 5mb! Then just click ‘insert’ on the theme assets window and it will put in the url of your uploaded image… Now, to get this into your theme, just find the section in the code where your image sits - in our case, it’s in the css where we have background-image:url(’ delete the bit and leave your cursor positioned in between the apostrophes - ‘ ‘ This box will appear at the bottom of your editor -Īnd handily tell you the limits - just click on it, navigate to your image ( it works on gifs and static images ) select it, and it will upload… This little beauty used to be known as tumblr’s ‘static uploader’ - you can upload files up to a maximum size of 5mb and a total of 15mb per day - theme makers mostly use it for css files or javascript, but you can use it for images too… anywhoo… Up in the top right hand corner you will see a little ‘cog’ icon… Now, you may be used to uploading images via the image uploaders in the basic editor - but you’re a coder now ( and we don’t have any options to do that in the basic editor yet ) so we’ll do it the ‘hardcore theme maker’s way’ *ehum*. try out different alignments to see what difference it makes! for this demo, i’ll be using ‘bottom right’, so all i need to do is change the ‘background position’ part in my css.īackground-image:url(’ background-position: bottom right Now, take a look at your theme and choose the positioning -Īs we have our sidebar and posts over to the left, with a lot of blank space to the right, it makes sense to have our background aligned ‘bottom right’ or ‘top right’ or ‘centre right’ so that it will fill that blank space. So find the ‘body’ section in your css ( around line 13 ) and add in those lines!īackground-image:url(’ background-position: top left ![]() If you want to add your background image to the ‘main’ area of your theme, you will need to add those lined to the ‘body’ css section as this gives the overall styling for your theme. the default is for the background to scroll along with the page. the attachment - background-attachment: fixed - a ‘fixed’ background means that the image will stay in place when you scroll down the page.if it says ‘repeat’ then the image will repeat, in effect, it will tile itself. the ‘repeat’ value - background-repeat: no-repeat - if you have ‘no-repeat’ then the image will only appear once, and only where you tell it to.‘right center’ will align it to the right, but with the center of the screen height wise… make sense? try them out to see what difference it makes… if you use ‘bottom center’ then the anchor will be the bottom of the screen but centered width wise. so for example, if you use ‘top left’ the anchor of your image ( the bit of the screen your image aligns to ) will be the top left of the screen. the positioning - background-position: top left - you can use any combination of left, right, top, bottom or center.the image url - background-image:url(’.THEME 101 PART 5 - Adding images, backgrounds, sidebar, ec.ĭon’t forget to pick up the code from the end of part 5 as this is the starting point for this tutorial!Īny background image will need at least four lines of code. this time we’re going to look at adding in some fancy stuffs in this case, images that you can apply to different parts of your theme! Welcome back friends, here’s part 6 in the series.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |