Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

How can I add/create buttons with pic and menu items for a front page?


  #1  
Old Jun 11, 2012, 04:22 PM
Kiwi's Avatar
Kiwi
 
32 posts · Jun 2012
I am trying to work out how to set up a front page for a static website (not a blog) that has four largish rectangular rounded edge buttons (2 x 2 layout) and within each button I have a pic/graphic on the right and a submenu of hyperlinks to other pages on the left that I can edit if I need to. I've attached a shot of a draft button so you can see what I mean.

I am not sure if there are any widgets or options within Atahualpa or WP that I can use to do this, or whether it's a "you need to either go learn some more advanced html and css, or get someone to make it for you" situation.

I'm only basically literate in HTML (tables and stuff, not divs) and my limits in css are following instructions to paste code someone else has created.

I've searched the web for how-to's but am not finding anything at my level (it's either too basic and doesn't cover what I need or it's way over my head).

I've found rounded corner box generators, thought it would be progress if I could generate just one (then I could later try and figure out how to make more, at different places on a page), but part of the instructions say put these rounded corner images in the same folder as the html page, or if you don't, change the path in the css to reflect where you put them. So I put them in the images folder and changed the path to that (copied it off my FTP uploader), but I've obviously got that wrong because the border doesn't show up.

Anyway, FWIW here's what the HTML generator did:
<div class="roundedcornr_box_642855">
<div class="roundedcornr_top_642855"></div>
<div class="roundedcornr_content_642855">

insert content

</div>
<div class="roundedcornr_bottom_642855"></div>
</div>
and then I had to put some css into the style sheet,
which I did via ATO>>CSS inserts, as follows:

.roundedcornr_box_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_tl.png) no-repeat top left;
}
.roundedcornr_top_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_tr.png) no-repeat top right;
}
.roundedcornr_bottom_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_642855 div {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_br.png) no-repeat bottom right;
}
.roundedcornr_content_642855 {
background: url(/htdocs/wp-content/themes/atahualpa/images/roundedcornr_642855_r.png) top right repeat-y;
}

.roundedcornr_top_642855 div,.roundedcornr_top_642855,
.roundedcornr_bottom_642855 div, .roundedcornr_bottom_642855 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_642855, .roundedcornr_bottom_642855 {
margin-top: -19px;
}
.roundedcornr_content_642855 { padding: 0 15px; }
Heaven knows what's wrong with it all, and I suppose if I was clever I'd just outsource it, but I am one of these people that likes to at least have some understanding of what my web pages are really doing in case anything goes wrong ...

Attached Thumbnails
Click image for larger version

Name:	menubutton.PNG
Views:	394
Size:	116.4 KB
ID:	1905  
  #2  
Old Jun 11, 2012, 05:01 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Please don't double post - see the answer in the other thread.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to create links for older posts on front page effy Center area post/pages 1 Apr 7, 2012 04:36 PM
[SOLVED] Page Menu Items Separate &quot;Buttons&quot;; Category Menu One Long Bar LaneLester Header configuration & styling 2 May 4, 2011 11:13 AM
How to make Page Menu buttons' color different from menu the bar? runnyeggsham Page & Category Menu Bars 2 Mar 15, 2011 09:53 AM
Problem changing the background color of just one of the page menu items\buttons Thomas Page & Category Menu Bars 3 Jun 6, 2010 05:38 PM
how to create the background colour of the buttons invisible? rinoa3108 Page & Category Menu Bars 9 Aug 9, 2009 02:06 PM


All times are GMT -6. The time now is 08:45 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.