help tweaking abstractia?

[the_beasts]

hello all! we hope everyone's doing well.

we're currently making our friends a homepage for their mutual aid efforts, using the abstractia style. we're having a few minor difficulties, and we're hoping someone with more expertise than us can help!



we're familiar with the 'customise journal style' pages and with html, but only know tiny fragments of css.

issues:

• when the navigation module is placed in the page header, the links all list vertically instead of horizontally across the page, stretching out the header unreasonably far down the page and making a huge awkward mess.
  
  we'd like to get the navlinks to display horizontally across the header like they do when set to display in the header on most other styles (such as crossroads, modular, strata, open wide, etc).


• the text of the page header is too transparent for good readability/accessibility, and we don't know how to adjust it manually, and can't really add a background to it the same way we can with content boxes (entries, sidebar modules, etc) without it looking messy and unfinished, because there's no border coded into the base style for that box/section of the page.
  
  we'd like to know either:
  • how to increase the opacity of the header title text (both journal title/subtitle and page title e.g. "recent entries"), or:
  
  
  • how to give that section of the page the same border as all the other content boxes.
  
  update: thanks to the help of numb3r_5ev3n we've been able to successfully fix the header/page title opacity!


• when we enter a bulleted list (like this one) into the custom text module in the sidebar, for some reason the indent gets broken and the bullets are all on the border of the module box, instead of being positioned in where the text naturally begins like they are in the page summary and tag list modules.
  
  we've temporarily half-fixed this by adding an ordered list with no points and placing the unordered list inside it, but that's not really ideal and creates a large indent instead.
  
  we'd like to know if there's a better solution to this? we'd prefer if the bullets were aligned the same way they are in the page summary & tags modules.


• the page header is limited to the area above the entries only, and doesn't spread out to cover the area above the sidebar when a sidebar is present. this makes it look awkward on landscape screens, and creates unnecessary text-wrapping of the title when a sidebar is present, which reduces readability and also stretches the header awkwardly far down the page.
  
  edit: we've partially alleviated this by reducing the font sizes of header title text to counter text-wrapping, but it's still not ideal.
  
  we'd like to know if there's a way to allow the page header to cover the entire width of the page, including sidebar when present?

if anyone needs to see the journal we're talking about, it's here: twy_and_vivi



thankyou all very much for taking the time to read this, and thankyou in advance for any help offered! it's much appreciated. <3

~ beasties

Comments

[numb3r_5ev3n]

I wish I could help. Abstractica looks great at first glance, but there are a lot of little fiddley things with it that made me give up on it after a while.

This is how the transparency is adjusted in CSS: https://www.w3schools.com/cssref/css3_pr_opacity.php

[the_beasts]

yeah, agreed. it's a very aesthetic, fancy-looking style, but it feels very awkward and rigid once you start trying to work with it. it's a shame.

thankyou very much for the supportive response, and especially for the link! we'll go read up on that and see what we can do, thankyou! <3

[vae]

For your Unordered List - the ul element is set to have "margin: 0" which is what's sending it all the way to the left of the parent element - so adding the ol element as a parent means that overall it has a left padding of 40, which is creating the indent.

Have a play with the element inspector in development tools and it will show you exactly which rules are applying to each element. I would either set "module ul" to have a left padding of the indent that you want to move it in from the border, or "module li" to have a left padding of the amount you want, either should work. Either way, remove the ol element as that's just clouding the issue!

[the_beasts]

ah, that does explain it! thankyou very much for the info and advice!

[momijizukamori]

For the header width:

 .two-columns-left #header {
    margin-right: 6%;
    margin-left: 6% !important;
  }

Though if you change the layout type, you may need to change this slightly.

For header navigation:

#header .module-navlinks a.current, #header .module-navlinks a, #header .module li { display: inline};

(we enabled 'navigation links in the header' on all layouts at one point, but the process of adding additional styling for that option isn't complete yet, unfortunately)

For the custom text list:

.module-customtext ul {padding-left: 1.15em;}

...but also I'd just call that one a bug in the layout, honestly, and I'm going to open up an issue to fix it globally :)

[the_beasts]

oh this is fantastic, thankyou so so much!! our disabled brain struggles to find the exact right elements to reference & syntax to use in the css, this is so incredibly helpful! thankyou very very much. <3

also, we wondered if the header navigation thing might have been unintentional, and if the bullet alignment was a bug or not. that's really good to know! thankyou very much for explaining to us, and for opening an issue for the ul bug!

we really appreciate all your help, thankyou. <3 <3 <3