inline block

anonymous asked:

this may turn out to be a silly question, but how are you able to get your icons lining up in rows (like on your a-tom post)? when i load icons i make from scratch onto a tumblr text post, there's only one icon per row (they're all stacked on top of each other). do i need a certain theme or is there html wizardry involved? ;;; i pray this question makes sense! thank you so much!

It is not a silly question!

HTML is involved. You can either copy and paste the html of the icons from the post into this site [in the ‘allow tags’ put <img>] then paste the stripped code into the HTML of the post. Or you can put this into your theme in the css, but it will also line up gif hunts if there is enough space for them to line up. You will not have to edit the icon posts to use this, however.

figure{
    display: inline-block;
}

adangerouspsychopath  asked:

hey i know you're not doing themes/commissions at the moment, but i was wondering if you could help me out with some coding? i'm trying to do the tab pop up thing and for the life of me i can't get it to work, i've followed the tutorial to the letter and i'm stumped, is there any way you could help?

I assume that, when you say ‘tab pop up thing,’ you mean the CSS Tabbed Content Area code ( like the one I have on my verses page ) instead of the ENTIRE pop up from scratch? Because adding simple pop ups is easy, but customising them can get a bit tricky. If I misunderstood your question, feel free to send another one. I use THIS CODING to get tabs but I will explain to what goes where because that tutorial doesn’t.

Keep reading

anonymous asked:

hi raven, I was wondering how you got your theme to change when the browser window is under a certain width wide? I think it's a really cool effect but I can't figure out how to describe it properly to google a tutorial and I wouldn't want to go looking through your blog's code to see how because you haven't released the theme. Thank you in advance I'm sorry to be a bother and I hope you're having a good day

They’re called media queries! It basically makes it so that the css of certain elements change when you resize the browser window. I have a what I’d consider a super basic setup where there are only two modes: larger than 980px and smaller than 980px. I could do more and make it a mobile theme but I’m lazy.

Here are some examples of it and this is the w3schools page on it. 

I’ll show you what mine looks like under the cut just so you have an idea of how i set mine up set up. It’s just a little bit of extra code and you can change whatever you wanna change! I add a 0.3s transition to anything affected by it (sidebar, entries, description etc) as well so everything moves smoothly instead of clunkily when you resize the window.

Keep reading

anonymous asked:

hello lovely person ! i was wondering how do you move your links about ? i've been seeing that trend where people would put their links around their theme and not in a row of some sort do you happen to know how to do this ?

hello lovely anon :3

yis… tutorial time…

here’s a quick snapshot of a test blog with links in a straight line at the bottom of a container ( the letters down there at the bottom ) and these are the links we’re going to be ‘scattering’

now - to begin, you need to find out the name of the css section that refers to your links - sometimes it’s ‘links’ or ‘nav’ or something similar.  the easiest way to find this is to scroll down to your links in the html - 

this is what they look like in this theme - and the ‘div id’ is called links.

what we need to do here is add in some extra coding so that you can position the links individually…

the first thing to do is make sure each link in your list has it’s own ‘div id’ so we add in <div id=“link1″> at the beginning of our first link and close the div at the end of the link with a </div> - do this for each of your links, giving each one a unique number.

scroll up in your code until you find the corresponding css section, in this case we’re looking for the css entitled ‘links’ - and there will probably be three sections - one called ‘links’ one called ‘links a’ and one called ‘links a:hover’.

you should only need to tweak this if you need to change the general position of the ‘group of links’ on the page… now we just add the css for each of our new div id’s - e.g. 

etc - make one for each of your links - and this is what our links look like now…

nb/ because these new div id’s are sitting inside your original one, you can use fixed positioning - you may also need to tweak the original ‘links’ div positioning to make sure they sit ‘around’ the corner of your container ( i.e. move it up/down/left/right to suit ) - you may also need to take into account whether that original ‘links’ css has a fixed width and make it wider/narrower to suit… 

it looks a bit naff with letters, so here’s the same thing with symbols…

or if you want to go all out, you could even add in different images…

things to keep in mind - make sure to space your links out enough that they work properly - test them on your blog and if you find one isn’t working, it might be a little too close to another.

and that’s about it :3

anonymous asked:

hello dahlia! i hope youre having a good day and youre eating enough! but i have a question--- how did you get your navigation page set up the way you did? if you dont mind me asking i mean!

Hello! I actually got permission to use the code by a friend as I had the same question as you; it’s a general/simple code. PLEASE DO NOT CLAIM AS YOUR OWN NOR REMOVE CREDIT! This is inserted in the code of the main theme:

/*--------NAVIGATION PAGE--------*/
.navilist {
    width: 47%;
    display: inline-block;
    height: auto;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin: 1.5%;
    margin-bottom: 5px;
    float: left;
}
h4 {
    font-family: {font:Body Font};
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #975741;
    padding: 3px;
    margin: 3px;
    text-align: center;
    border-bottom: 0.5px solid #462522;
}
h5 {
    font-family: {font:Body Font};
    font-size: 6px;
    font-weight: italic;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c9bdbd;
    padding: 5px;
    margin: 10px;
    text-align: center;
    border-top: 0.5px solid #462522;
}
h6 {
    font-family: "bodoni", palatino, serif;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #c9bdbd;
    padding: 5px;
    margin: 10px;
    text-align: center;
    border-top: 0px solid #462522;
}
.navilist li {
    color: #462522;
    margin-left: 10px;
}
.navilist-clear {
    clear: both;
}

With, in the ‘standard layout’ page in the HTML section:

<div class="navilist-clear"></div>
<h6>title</h6>
<div class="clear"></div>
<div class="navilist">
<h4>header</h4>
<ul>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
</ul>
</div>
<div class="navilist">
<h4>header</h4>
<ul>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
</ul>
</div>
<div class="navilist-clear"></div>
<div class="navilist">
<h4>header</h4>
<ul>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
</ul>
</div>
<div class="navilist">
<h4>header</h4>
<ul>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
</ul>
</div>
<div class="navilist-clear"></div>
<h5>code &copy; <a href="http://rphbyday.tumblr.com/">rphbyday</a> 
with permission to use by <a href="http://ditarph.tumblr.com">ditarph</a>.
<br />please do not redistrubute nor claim as your own.</h5>
“Extreme vetting” is already the reality for refugees. This comic shows how.
.c-entry-content .e-image {width: 30%;display: inline-block;}@media screen and (max-width: 800px) {.c-entry-content .e-image {width: 100%;display: block;}}Robyn Jordan is a cartoonist based in Seattle. She makes mini comics and drawings, and teaches art in a public elementary school in Capitol Hill. She serves on the Short Run Comix and Arts Festival board. Her nonfiction memoir and journalism comics have been featured in various publications, including the Stranger, Seattle Weekly, Narratively, Bright, and the Huffington Post. … Read more