mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-09-25 08:00 pm
Entry tags:

visualosities: clean and simple



Clean and Simple Visualosities



Here's another code to go within the Clean and Simple series. There are two different codes below. The top one is the one I assume will be used more often, which is to say that it allows for images of several different sizes. The second is one that I prefer, personally, but does require that you size all of your visualosities images to be exactly 500x250. I think the latter looks nicer, but the cropping and/or resizing of images can be a pain, so I just coded for both and you guys can decide which suits you better.




'clean and simple' design by mistojen







color change:

#27C296

instructions (for varying-sized visualosities images):
  1. Replace the following:
    • MAINIMAGE with the url for the image as your first page. This needs to be exactly 500x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to, so unless you're pretty comfortable with navigating and editing CSS, I wouldn't recommend it.
    • CHARACTERNAME with your character's name or whatever you want the overlaying text to say. If you prefer not to have overlaying text at all, simply remove the div entirely, leaving just the <*a> tags that were wrapped around it. You may need to fiddle around a little with the font-size on this to fit it to your liking, because longer character names will need a smaller font-size and shorter names can have a larger one. If you'd like to move this div down further so it lays lower on the image, you're going to want to add margin-top: ##px; wherein ## is however many pixels you want to push the div down. You can play around with this until you find a placement you like. If you want to move the div up so that it's closer to the top of the picture, add margin-bottom: ##px; wherein the ## represents, again, the number of pixels you want to move up.
    • IMAGEURL with whatever image you're putting in the center. If the image is less than 420px in width and 250px in height you're going to want to remove the style on the image tag. If the image is less than 420px in width but more than 250px in height, change the properties in that div to height: 250px; width: auto;. If the image is less than 250px in height and more than 420px in width or is larger than 420x250 in general, leave the coding alone and it will size for you.
    • page1, page2, and page3 with the applicable page numbers. You'll need to tweak these for every section you add. I've notated the code so that you can see clearly what needs to be copied and pasted for each individual image you add to the visualosities, but each of those tables will need you to alter the code to rename each table and the links in it appropriately. You want the last table's link on the bottom of its code to link back to page1 always.
  2. Please do not remove credit.
  3. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
  4. Enjoy!





'clean and simple' design by mistojen







color change:

#27C296

instructions (for visualosities images all 500x250):
  1. Replace the following:
    • MAINIMAGE with the url for the image as your first page. This needs to be exactly 500x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to, so unless you're pretty comfortable with navigating and editing CSS, I wouldn't recommend it.
    • CHARACTERNAME with your character's name or whatever you want the overlaying text to say. If you prefer not to have overlaying text at all, simply remove the div entirely, leaving just the <*a> tags that were wrapped around it. You may need to fiddle around a little with the font-size on this to fit it to your liking, because longer character names will need a smaller font-size and shorter names can have a larger one. If you'd like to move this div down further so it lays lower on the image, you're going to want to add margin-top: ##px; wherein ## is however many pixels you want to push the div down. You can play around with this until you find a placement you like. If you want to move the div up so that it's closer to the top of the picture, add margin-bottom: ##px; wherein the ## represents, again, the number of pixels you want to move up.
    • IMAGEURL with whatever image you're putting in the center. Again, this image must be exactly 500px in width and 250px in height. Any other dimensions will make for some pretty crazy looking visualosities.
    • page1, page2, and page3 with the applicable page numbers. You'll need to tweak these for every section you add. I've notated the code so that you can see clearly what needs to be copied and pasted for each individual image you add to the visualosities, but each of those tables will need you to alter the code to rename each table and the links in it appropriately. You want the last table's link on the bottom of its code to link back to page1 always.
  2. Please do not remove credit.
  3. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
  4. Enjoy!

Post a comment in response:

From:
Anonymous
OpenID
Identity URL: 
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Links will be displayed as unclickable URLs to help prevent spam.