code tut

anonymous asked:

Hello~ ! I was wondering how would I tilt a theme element? ( I'm trying to tilt my container/posts at an angle ) Thank you xx

hello there nonny - 
well, ladies and gentlemen - for those of you who would like to add the ‘star wars title’ effect to your posts, congrats - there is an easy way to do it using ONE LINE OF CODE!

for example…

you can also tilt things to another angle - ( more examples below the cut ) - and these effects can be applied to ANY element of your theme… ( e.g. your description, or a perspective effect on your links, etc. )

Keep reading

anonymous asked:

Hey there, I have been trying to find how to do the hover descriptions on contained themes that look kind of like an updates tab and I was wondering if maybe you knew how? Thank you, even if you don't still thank you because you do so much for the rp community and you're just amazing<3

hello there nonny,

settle in, it’s tutorial time!

how to make a hover description or updates tab

e.g.

Keep reading

anonymous asked:

Hey there G! :'3 I was wondering if there was anyway you could explain to me how to change posts sizes on a theme. I'm trying to make theme posts 350 px but everytime I do the images I've reblogged disappear. If the posts are 400 or 500 px they are there, but if I go any smaller they're gone again. p.s thank you for being so helpful always. <3

hello there nonny…

post widths are quite often the bane of theme makers lives… O_O  tumblr standard code will render your post blocks in the following widths by default - 250px, 400px, 500px, 700px - why this is, we may never know… - if you look at tumblr standard code ( for example for photosets ) you can see the sizes here -

which is why most theme makers will stick to these standard sizes.  anything other will require a little extra code tinkering.  

i’ll walk through changing post size on my ‘in flux’ theme - it’s currently set as a standard 400px post theme, but we’ll notch it down to your required 350px.

here’s our ‘starting’ basic theme…

you might want to make sure you can see a text post, a video, a photo and a photoset on your theme live preview when editing…

first of all we’re going to make the container smaller and the post width smaller…

on line 203 of the code - we’ll take 50 px off the post container size -
on line 190 of the code - we’ll take 50px off the post size - 

now - you’ll see our text posts look fine -

and our single photo posts are probably okay too - that’s because in this theme, i’ve already included a little bit of code on line 177;

img {
   max-width:100%;}

if your photo posts have messed up at this point, you might want to add that bit of code to the css in your theme.  

the code for photo posts in this theme is on line 423

{block:Photo}<center><img src=“{PhotoURL-400}”/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}

you can change the block size to {PhotoURL-500} - as long as the reference is LARGER than your post size and you include the ‘max-width-100%’ in your css - all photos will be forced into the right size for your post width.

but if we look at our photosets and our video posts - they’re still sitting at the ‘400px’ post size and sticking out to the right a bit :(


now we need to make sure our photosets and videos will fit

for photosets, it’s quite an easy fix… scroll right down to the html for the post blocks ( right down at the bottom )  on line 425 you’ll see the block for photosets - 

{block:Photoset}<center>{Photoset-400}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

all we’re going to do here is take out the reference to the ‘400′ post width.  delete that line and paste in the following;

{block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

this will now be picked up by the css we referred to earlier - the ‘max-width:100%;’

videos are a little trickier as they won’t be picked up by the image max-width.

we need to add in some extra css now - 

.video {
   width:350px!important;}

.video iframe {
   width:350px!important;}

just pop that anywhere in the css section of your theme - then scroll down to the video html section and add in the reference to your new css like so-

{block:Video}<div class=“video”>{Video-400}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

again, as long as the video size is LARGER than the one you’re setting in your css, it will work fine!  here’s our video post nicely resized -

one last thing you want to check when resizing posts is the width of your notes on your permalink pages.

by changing the width of the posts, my notes are now a little too big…

in this theme, i only had to take 50px off the width of the notes to get them to line up again…

you may also need to check your tags/permalink etc, depending on how your particular theme is coded and make sure all widths are in line with your new post size…  

but that’s about it… :3

if you found this useful, a like or reblog is always appreciated! 

Quote Border Tutorial by Bravethemes

if you don’t know exactly what quote borders are; it’s a line that goes across your blog on the top and have either a quote or little cute messages. i had people request the ones I had on my “Girl Almighty” theme and i didn’t want to give the exact code so here’s a really simple one that you guys can edit. however, please keep the credits :)

preview and code

anonymous asked:

Do you perhaps have a tutorial on putting having an image overlapping the container/entries of a theme? I've seen where people will do that so that when you scroll, it disappears beneath this image, but I can't find any tutorials about it. :( Could you please make or direct me to a tutorial? Thank you!

hello there anon - 

while you CAN do this - i would caution as to what image you use, and how you place it… but yes… here’s a lil tutorial on how to do this and why you need to be careful in choosing size and position–

Keep reading

anonymous asked:

I've check your resources but I may be missing it. I'm looking for how to add the code to make bold or italic words have that glow behind them. Would you mind sharing that code?

[ reposting on anon in case this helps anyone else! ]

basically…

or any combination of colour and glow/shadow that you like!

it’s actually just a very simple tweak to the code for ‘bold’ in your theme code.

somewhere in your code, usually up at the top of the css ( the bit that’s mainly in orange on the html editor ) you will have a code for bold that designates how it looks - usually theme makers will just assign a colour to is so that you can choose this from the basic editor.  just jump into the html and find the past that codes for bold ( b or strong or both ) - it probably looks something like this;

b, strong {
     color:{color:bold}; }

it might have other attributes relating to it like font-weight or text-size…  this is the bit you’re going to need to tweak…

my personal preference is to have the letters appear transparent with the ‘glow’ around them, but you can make the glow the same colour, or even a different colour to the letters themselves ( make sure to check for readability though as too big a contrast can be hard on the eyeballs… )

what you need to add is a text shadow…  below is the example of a black shadow around white text, where the ‘color’ is the color of the text and the color value in the text-shadow is the color of the ‘glow/shadow’;

b, strong {
   font-weight:bold;
   color:#fff;
   text-shadow: 0px 0px 10px #000;}

so what the hell does that mean?

well the glow/shadow is generated in four parts…

1. value = the X-coordinate
2. value = the Y-coordinate
3. value = the blur radius
4. value = the color of the shadow

if you change the numbers in 1 and 2 - e.g.

text-shadow: 5px 5px 10px #000

the glow/shadow will appear slightly below and to the right.  if you use negative numbers - e.g.

text-shadow: -5px -5px 10px #000

then the glow/shadow will appear slightly above and to the left - mess around with the values to get and effect you like.  just leave them at 0px if you want it to be centered.

the blur radius refers to how far the glow/shadow spreads around the actual text - again, change the number till you get an effect you like - large numbers will have a wide spread but also make the glow/shadow fainter.

and lastly the color is just a hex code for the color of the glow/shadow - have it contrasting or the same as the text colour if you really want your text to stand out.  if you really want to go for something with a little more impact you can always add - TWO - layers of glow/shadow to the text…

text-shadow: 1px 1px 1px #fff, 3px 3px 5px #d77109;

which adds the white glow first then the orange one around the edge of that with a little bit of offset on each one… just remember to separate your two layers of glow/shadow with a comma, yis.

now anything in bold on your blog will have the glow/shadow - you don’t have to add this to the bold code though - you can add it to header code or italics… wherever you like really… just make sure to check for readability!  

hope this helps!
love from,
octomoosey :3

anonymous asked:

where do i find the little symbols you used for the links on your 'the sketch' theme? like the little flower looking symbol? i cant copy it to find it in the html & i've looked through it a bunch but cant seem to spot it. thank you.

hi there anon - 

those symbols you won’t be able to copy and paste - and because some devices don’t recognise copy pasted symbols ( you end up with the little blank box ), i used something called ‘font-awesome’ which is actually coded into the theme.

font-awesome is actually very easy to use, and you can include it in any theme just by adding a few simple lines of code.

firstly add this line up at the top of your code - before the CSS ( before <style type=“text/css”> )

<link rel=“stylesheet” href=“//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

then you need to find the code for the icon you want to use.  just go to this page and have a look through.

when you find the one you like, to include it in your theme just click on the icon and you will be given the code for it - the one that looks like a flower is actually their asterisk icon.  

this is the line of code for it;

<i class=“fa fa-asterisk”></i>

just pop that into your theme instead of text where you want your link; e.g

<a href=“/” title=“home”><i class=“fa fa-asterisk”></i></a>

you do need to be aware that font-awesome icons work on an ‘italic’ class, so to change the colour of them you need to adjust the colour for italic text on your theme.

hope this helps! :3

anonymous asked:

hello, moosey I hate to be a bother but do you know how people manage to get their post info to hover when you move over a symbol? Like when it tells you: who you reblogged the post from, if they'd like to reblog it, the date and time they posted it, etc? Thank you very much because i've been looking everywhere and can never find it ; W ;

hello there anon - 

settle in and get comfy - it’s tutorial time… XD

okay, what you’re actually using for the hover information is actually something called a ‘tooltip’.  where you can have a link as an icon or a symbol, a letter or even an image, and the information is shown on hover - it’s the exact same code people use for hoverlinks.  most people use the tooltips by malihu and that’s what i’ll be using here… 

installing the code

the jquery code for tooltips comes from the demo by malihu ( definitely check out their page! ).

1. up in the top section of your code, you will need to paste three things - make sure these go into your code ABOVE <style type=“text/css”>

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>

[ the minimum jquery required to run this script from google ]

<script src=“http://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js”></script>

[ the ‘style my tooltips’ js file from malihu ( which i’ve uploaded for you, so you don’t need to do it again… you can always upload your own version into the theme assets area if you like! ]

<script>
(function($){
$(document).ready(function(){
$(“a[title]”).style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:“title”
});
});
})(jQuery);
</script>

[ the script for actually calling the tooltips from malihu ]

change the delay time and the fade speed to suit your preferences… ( in milliseconds O_O )  the original code has been changed from “[title]“ to “a[title]” so that it works on links and not just text…

2. in the next section of your code ( the css bit which is mostly orange and yellow ) - between <style type=“text/css”> and </style></head> paste the next bit of code - this is how your hover information will be styled ( i’ve added some extra to help explain the styling XD )

#s-m-t-tooltip {
  max-width:300px;
  border-radius: 0px; /* you can add in a border radius here for curved corners if you like */
  padding:4px; /* space around the text */
  margin:5px 10px 5px 0px; /* positioning of your hover info in relation to the link */
  color:#fff; /* text color */
  border:1px solid #fff; /* optional border and border color */
  font-family: ‘Fjalla One’, sans-serif; /* i’ve added a custom font in here but you can remove this line if you don’t use custom fonts */
  font-size:10px; /* font size of your hover info */
  letter-spacing:2px; /* optional letter spacing */
  background:#000; /* change the background color of your hover info */
  z-index:99999;}

3. now you will need to add the tooltips to your post information. ( this is the slightly tricky part, depending on your theme! ) - post information will be coded into both your css and html, and theme makers often use a wide variety of things to refer to it - things like ‘info’ or ‘date’ or ‘perma’ - depending on how they design their code… 

basically, what you’re looking for in your theme is the information down at the bottom of the html with the code for date/via/source/notes etc.

i’ll use a sample theme to help… if i scroll down to that section in my theme you can see it’s under the css section ‘info’ - 

this is my ‘info’ css;

and this is what my post info/notes/tags look like currently

to begin, we’re going to turn each of those links into a symbol and add in the information for the tooltip to the right place…  anything that appears in the ‘title’ section of a link will be the hover information on your tooltip.  

please see below - each section of info has been moved into the ‘title’ portion of the link and the link itself has been replaced with a symbol.  ( there’s no ‘reblog’ option in this theme, but you can always add one in to yours! )

this is what my info section looks like now with the hover tooltip for each symbol;

you can move your tags into another section, below the post info or elsewhere - i wouldn’t recommend moving your tags into a tooltip though, as you can only show what tags are there, but you aren’t able to click on them…

this is with my tags moved out of the ‘info’ div ( just below ) - then some fancy schmancy stuffs like adding a background and a border to the info section in the css ( as well as making the font a little bigger for my symbols ).  you could also add a css section to style your tags if you like!

and voila!

if you find this helpful, a like or reblog is always appreciated! :3