CSS Losing Formatting – Ixion Theme – Home Page
-
My home page formatting is driving me a bit nuts :) I am using the Ixion theme with a few CSS tweaks
After reading a lot of helpful threads I figured out a way to add text overlays to my 3 featured posts at the bottom of my home page.
I implemented the following CSS today
`.page .entry-header {
display: none;
}.featured-content article:nth-child(1):before {
color: #FFF;
content: ‘Video Slide Show’;
z-index: 2;
font-variant: small-caps;
position: relative;
font-size: 25px;
font-style: italic;
font-weight: bolder;
text-align: inherit;
position: absolute;
top: 70px;
right: 70px;
}.featured-content article:nth-child(3):before {
color: #FFF;
content: ‘Offers / Incentives’;
z-index: 2;
font-variant: small-caps;
position: relative;
font-size: 25px;
font-style: italic;
font-weight: bolder;
text-align: inherit;
position: absolute;
top: 70px;
right: 55px;
}.featured-content article:nth-child(2):before {
color: #FFF;
content: ‘Gallery’;
z-index: 2;
font-variant: small-caps;
position: relative;
font-size: 25px;
font-style: italic;
font-weight: bolder;
text-align: inherit;
position: absolute;
top: 70px;
right: 130px;
}.header-overlay {
margin-bottom: .5em;
}
`
Upon finishing editing.. the formatting appears exactly as I would have hoped… BUT… once I refresh the page and it reloads … the formatting goes nuts.. the text shifts around.. the pictures fall out of alignment.. etc..At this point if I simply open my CSS editor and hit ANY key.. even enter.. or backspace..ALL of the required formatting instantly reappears and fixes itself to the way I intended on seeing it.. I republish… reload.. and crash.. all formatting lost again.
What am I doing wrong? Is there an issue with the code?
(it’s a bit beyond me)
thank you!
The blog I need help with is: (visible only to logged in users)
-
-
If my explanation is confusing at all I can post “broken” and “fixed” pics of the front page… would probably shed some light on things.
Can pics be posted to forum posts? (cant see how)
-
-
nope… still need help…
As I change the size of the browser window all of the text alignment gets messed up again..
Heeeeeellllllllllllllllppppp !!!! :(
-
Hello, My website use theme just like yours, I found you have some problem on your website. your font will change size when you click it. you can use those:
.wf-loading body {
visibility: hidden;
}the answer from wordpress.com engineer.
Hope everything going well -
Ah! I had noticed this but was trying to fix some functionality first and had not looked in to this yet…
thanks for the fix!
I just hope my main topic gets answered/looked in to soon… it’s driving me crazy and I want to go live!
-
Just in case there is another way of achieving my goal .. I will explain something else..
I know that if I allow my post titles to be shown on their respective pages that they would instantly translate perfectly as showing in each featured post box.. perfectly centered etc.. formatted etc.. the reason I was trying to overlay text instead was I hid the post titles on their respective pages.. I didn’t want the post title to show as it does at the top of the page..
this is why I am trying to ADD text to the feature post boxes instead..
if there is a way to hide the post titles on the post’s actual page… BUT.. allow it to show on the featured post it corresponds to on the home page… I’d go for that too!!!
-
I have also considered just adding text to the actual image as that would be nice and static and resize dynamically with the picture… the issue there is my these uses a grey overlay on these photos… which I like… and the text would then be under the overlay… not as prominent.
hmmmmmmmm…….
-
If I could start this thread over I would explain things differently as the issues has shrunk, gone away, come back, evolved etc over time as I have tried to trouble shoot it..
the issue is now specifically with the text overlays.. I would like them to remain static in each featured post box… and prevent re-sizing a browser window from changing their location or general format.
-
Hi @mustangdarren!
If I’ve got this right, you’d like the titles for those featured posts on the front page, but you don’t want post or page titles on any other pages, correct? :)
If so, I’d say you had the right idea when you said:
if there is a way to hide the post titles on the post’s actual page… BUT.. allow it to show on the featured post it corresponds to on the home page… I’d go for that too!!!
.
First, remove the sections of code that are currently adding the text to the homepage.
Then, we’ll take a look at these two styles, and modify them:
.entry-title { display: none; } .entry-header { display: none; }We can make them more specific so that they don’t target the home page, but do apply everywhere else:
body:not(.home) .entry-title { display: none; } body:not(.home) .entry-header { display: none; }Both styles are now looking at the body tag of the page, and only being applied if the page isn’t marked as the home page!
You can then add whatever sizing styles you need as well :)
Let me know if that does the trick! :)
-
-
- The topic ‘CSS Losing Formatting – Ixion Theme – Home Page’ is closed to new replies.
WordPress.com Forums 