Basic Question.

[wraithmoon]

Hi.

I'm currently using Abstractia, my journal is here. And while I'm mostly happy with how things look, I am trying to figure out the CSS coding to move my entire layout (header included) to the right so the background photo is uncovered.

Can anyone point me in the right direction of where to look for said code? I'm sure this is super basic stuff, but I'm still figuring out the basics of how to read code.

Any help in this is very much appreciated.

Thank you!

Comments

[cimorene]

When I look at your journal with the css inspector, it looks like what you need is to change the left margin of the div called "primary", which is the main entry column. The numbers there are calculated by the wizard, but the current value is

(at)media only screen and (min-width: 40em)
.two-columns-right #primary {
margin-left: 20%;

and it looks like if you override 20% in the CSS with a larger number it should move the layout to the right. I'm not 100% sure that would work, but that's where I'd start. You can probably use the CSS override box in the wizard, but if not you could create a new theme layer in the advanced customization area and start by copying the raw source code of the theme layer you current use from the Public Layers pages and pasting it into the new layer, then appending the command

set custom_css = " ";

at the end (with all the custom css styles in the middle).

[cimorene]

Oh, actually if you want to move the header too I guess you need the div "canvas" instead. It might be as simple as

#canvas {
margin-left: 30%
};

if you're lucky! You can examine the source code of Abstractia here (you get there by clicking on Advanced Customization and Public Layers). Then raw source, or syntax highlighted. If you're using Chrome or Firefox you should be able to right click on the page and choose "Inspect" or some other option like that to view the source of it; that identifies the names of the divs for you.

[wraithmoon]

Thank you for all the input! Your suggestion of using Inspection for Chrome actually helped. I was able to figure out how to do exactly what I was looking to do using that.

However, I appreciate the coding you gave here. I'm going to keep this in mind, moving forward.

Thank you so much again for all your help :)

[cimorene]

No problem! I was where you are once; we all need a little help figuring this stuff out!

[wraithmoon]

Absolutely, but it's your kindness that I appreciate the most.

Thank you again!