Convert or Fix my frontpage. WordPress
- SOLVED
www.ariadneswonderland.gr, There's 3 components to the frontpage,
I have a temp admin user, contact me if needed.
A gallery that will act as a showcase,
A line of 5 pictures (php code that retrieves the latest 5 Featured Images from a specific category and displays them one next to the other) that will need to have a background picture (as of now they are in a white box and look rather horrid... I've got the background pic ready tho [Attatched])
And finally 3 content boxes next to each other that apparently are beyond my css abilities to write.. :S The boxes content will be in order:
Kids Wonderland (catering services) Just an image with some text+hyperlink under it all placed in a rounded box with a title. [pastel Peach]
About me, A small image on the left, text on the right and 2 buttons underneath. Always in a rounded box with title ofc. [pastel greenish blue]
Sweet of The Month, Identical to kid's wonderland setup wise but a pastel violet.
All of the code works, including the 3 panels, what is needed really is some tweaking to place a background under the featured images, and someone with some decent CSS to tweak the 3 panels so they line up and have the right colours etc. For instance when i change the title from H1 to H2 it loses capitals (which i wanted) but for some reason the image no longer fits.. My 1 semester of css just isn't covering it.
I'll be receiving my images back from the photographer on wednesday so this has a deadline of wednesday... :S
CODE:
1. <strong>Style.css code</strong> for the panels/box'es at the end of the page.
/* === Basic styles for all three boxes === */
.contentBox {
border-radius: 8px;
float: center;
margin-right: 10px;
margin-left: 10px;
min-height: 300px;
padding: 0 0 0 0;
width: 240px;
}
.contentBox img {
display: inline; /* legacy IE */
float: left;
margin: 0 10px 10px 0;
}
.contentBox .inner {
overflow: hidden; /* contain floats */
padding: 10px;
}
.contentBox .links {
clear: both;
margin: 10px auto;
padding: 10px 0;
text-align: center;
width: 98%;
}
.contentBox .links a {
border-radius: 12px;
color: #fff;
display: inline;
padding: 5px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.contentBox h2 {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
line-height: 1;
margin: 0 0 10px 0;
padding: 10px;
text-transform: uppercase;
}
/* Styles for individual columns */
/* === Green column === */
.one {
border: 1px solid #b3e5c0;
}
.one h1 {
background: #f5f5f5 url(http://ariadneswonderland.gr/wp-content/uploads/2012/07/sampleBG.png) repeat-x bottom;
color: #8f7f6e;
}
.one h2 {
background: #f5f5f5 url(http://ariadneswonderland.gr/wp-content/uploads/2012/07/sampleBG.png) repeat-x bottom;
color: #8f7f6e;
}
.one h3 {
color: #8f7f6e;
}
.one .links {
border-top: 2px dotted #8f7f6e;
}
.one a.more:link,
.one a.more:visited {
background: #6f9a7c;
}
.one a.contact:link,
.one a.contact:visited {
background: #8f7f6e;
}
/* === Pink column === */
/* Rinse and repeat */
/* === Yellow column === */
/* Rinse and repeat */
2. <strong>HTML </strong>(i know i've made it all in one monster post... horrible but my css just isn't that good :S and with all the different plugins...) Please note that here it's Dropshadowbox that i want replaced with the attatched image instead,
<p style="text-align: center;">[slider_pro id="1"]</p>
<h1 style="padding-left: -30px; text-align: left;">Featured Sweets.</h1>
<h1 style="padding-left: 30px; text-align: center;"></h1>
[dropshadowbox align="center" effect="curled" width="97%" border_width="1" border_color="#DDD" inside_shadow="false" ]
<h1 style="padding-left: 27px; text-align: center;">[php function=1]</h1>
[/dropshadowbox]
[wpcol_1third id="" class="" style=""]
<div class="contentBox one" style="text-align: left;">
<h1> Kids Wonderland</h1>
<div class="inner">
<img src="http://ariadneswonderland.gr/wp-content/uploads/2012/07/sampleIMG.jpg" alt="Sample image" width="241" height="180" />
<span style="font-size: 14px; font-family: Ubuntu;">Με λένε Αριαδνη και έιμαι στην Ζάκυνθο! Προσέχω πως φέρομαι στον Φίλιπ γιατί είναι καλός και δεν κάνει να τον στενάχωρο. !</span>
<!-- end inner -->
</div>
<!-- end contentBox-->
</div>
[/wpcol_1third] [wpcol_1third id="" class="" style=""]
<div class="contentBox one" style="text-align: left;">
<h2> About Wonderland</h2>
<div class="inner">
<img src="http://ariadneswonderland.gr/wp-content/uploads/2012/07/sampleIMG.jpg" alt="Sample image" width="120" height="170" />
<h3>Hi, I'm Ariadne,</h3>
<span style="font-size: 14px;">and if you haven't already guessed, I have a thing for sweets. Welcome to the place</span>
<div class="links"><span style="font-size: 14px;"><a class="more" href="#">read more</a> <a class="contact" href="#">contact</a></span>
<!-- end links --></div>
<!-- end inner -->
</div>
<!-- end contentBox-->
</div>
[/wpcol_1third] [wpcol_1third_end id="" class="" style=""]
<div class="contentBox one" style="text-align: left;">
<h1> Kids Wonderland</h1>
<div class="inner">
<img src="http://ariadneswonderland.gr/wp-content/uploads/2012/07/sampleIMG.jpg" alt="Sample image" width="241" height="180" />
Me lene katerina kai menw stin kozani. Mou aresei na talaipwrw ton philip..
<!-- end inner -->
</div>
<!-- end contentBox-->
</div>
[/wpcol_1third_end]
[wpcol_1half id="" class="" style=""]
[/wpcol_1half] [wpcol_1half_end id="" class="" style=""]
[/wpcol_1half_end]
3.<strong>[php function=1]</strong> This is the php that i'm using as a snippet to retrieve the Featured img from the 5 latest posts in category 5.
<?php
$categoryId = 7;
$args = array('category' => $categoryId , 'post_status' => 'publish', 'numberposts' => 5);
$posters = get_posts( $args );
if ( $posters ) {
foreach ($posters as $post) {
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
?>
<a href="<?php echo get_permalink($post->ID); ?>" title=""><img src="<?php echo $imgsrc[0]; ?>" class="thumbnail" width="130" height="130" alt='' /></a>
<?php }
}
?>
Answers (2)
Arnav Joy answers:
i would like to help you for this , send me pm if no other person is working on it.
Philip Prescott-Decie comments:
Went above and beyond. Was quick and professional. I am certainly going to call on him for any other projects that might arise!
Manoj Raj answers:
Hi Philip,
Send me a PM with login details.. I will try my hands on it... HTML coding looks confusing(probably not hand coded i guess)...
Cheers