How do I create rounded corner buttons (with submenus and a pic) within a page?
 

[Just rephrasing the title of the thread given where the question went eventually. Original Q was as follows. Hmm, OK, the title change didn't take!]

I am sure the answer is obvious; just having a blonde moment, lol.

TIA
Kiwi

One of the things I like about Atahualpa is the documentation is built into the theme options. What other kind of documentation are you looking for?

Also there is a woman who wrote a Atahualpa101 guide - do a google search for 'carol smith atahualpa'

Thanks, miles & juggledad.

I found the 101 guide but it told me no more than I worked out from the inbuilt help within the menus.

Maybe I need another thread/question instead then ... I had a couple of miscellaneous questions, and in the end they may be html and css questions, not WP/Atahualpa ...

First, I see there is a "template" option for individual pages, but I am not sure whether there are templates available, or how you create and save one you want to use, or what ... However, this is a minor question and may not help me as much as the one that is really baffling me now ...

Second, 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 ...

:)

'Page' templates are a WordPress feature - as of 3.7.7 there is one page template provided with the theme. The 'multi-column/custom query' template. You are also free to code your own.

You can create a box with rounded corners with CSS - however the rounded corners won't show in IE8 and earlier. A correction on your termonology, you want a BOX with a graphic and some menu items - a button is ment to be pushed, so you wouldn't have several links in a button.

This is possible to do with HTML and CSS and there are several wys to do it

build a two column, two row table in html and have each cell one of the rounded boxes with the image and menu in it

you could add some new widget areas to the page and put in text widgets with th ecode you need

My suggestion is to build the HTML/CSS to create one box the wy you want it, then clone that code.

Thanks, juggledad, that makes sense, and thanks for the terminology correction.

Now I just have to work out how to do it.

I did try to change the title of this thread but it wouldn't let me; realized I was in the wrong forum to be asking the question I ended up asking, so reposted in the page/post slot so the answer would be filed in a more appropriate area, but I see that was unacceptable.

Thanks anyway

Getting familiar with CSS and HTML are going to go a long way to helping you figure out how to do some of the things you want. There are tools and plugins that can help in those regards but have their limitations. Once you understand how CSS and HTML work your options are vast. The tools, plugins, and themes that have a lot of this built in are cumbersome in my estimation as you have to wander through endless settings.

In many cases CSS alone will do what you want. For instance if you want that round corner box you just create a div with a class or id and then use CSS to add a radius to the corners but as Juggledad mentioned some CSS won't work in IE8 and before. Getting familiar with the Firebug extension for Firefox is also a great learning tool as it has hints for CSS as you type and you can design vertually. I often open up a site and tweak the CSS virtually with Firebug and then cut and paste the code into the CSS Inserts box in Atahualpa.

There are also online tools for CSS such as this border radius generator. W3schools.com is another great learning tool as you can play with code to see what it does.

I hope at least some of that helps.

Thanks, Larry. I do think it's well worth getting into CSS and learning how to use divs instead of tables (or, in combination), which has been daunting for a newbie, but I have made some progress.

I have been working with juggledad's suggestion above, have managed to create the rounded corner box and drop a 2 column, 1-row table into it, with text on the left and the pic on the right.

I managed to work out how to get rid of the table styling in ATO and am getting closer to what I want.

Here's what I have so far: http://realevaluation.com/test-page/

I did use a code generator to get the rounded corner rectangle, but the one good thing was I could follow exactly what it was doing in the code, so I am starting to get a grip on that.

I also understand I really need to use the images option to make sure it works in earlier IE browsers, even if CSS3 would be easier to make.

What I am grappling with right now are:

1. How to get cleaner lines on those curves. I guess that just means that the particular generator I used doesn't make super tidy lines, and maybe I just need to create some of my own or, as you say, use firebug to find some on the web somewhere and download them.

2. How to get the jpeg sitting right up to the top, bottom, and right-hand edges of the curved box (see my earlier post which has a jpeg attachment of what I am trying to do). Sounds simple, but my hunches so far based on a limited knowledge are that:

a. my table is only ever going to sit inside the middle of a 3x3 rounded corner box, so maybe that means I need a div instead of a table that will - I don't know - float (if that's the term) and just sit wherever I want it?? I am not yet sure how to do divs within divs, let alone how to position them on the page, so I feel like I am looking at a steep climb here.

b. the current code has the curved box as a background image, and that means that I ever could get the jpeg right up against the border, the curved corner of the jpeg (which is white) will end up sitting over the top of the black border and hiding it altogether, so I either need to make the border the foreground (which may be impossible if it's a white box, not transparent, because it will block out all the contents) or just have the edge of the image be the border there.

Or, is there a way I can create an entire image in another program that includes the rounded corner AND the pic within it, right up against the right borders, make this a background image, and then create a small table I can drop into the left half of it with my text and links?

Appreciate any pointers that will help me go hunting for more knowledge in the right direction ...

Thanks,
Jane

the curves look great in safari (see attachment) - however you need to make the image a png instead of a jpg to cut the corners transparent or they will show over the box's borders

go to ato->Style IMAGES and blank out all the options and see what it looks like.

you can add the following to the CSS Inserts

If you don't need a box that expands and contracts to fit the content you could create a div and use a background image with rounded corners. Then add the content. Does that make sense?

Thank you both.

juggledad, the corners look fuzzy to me, even in what you attached, like an ink pen on blotting paper. I wonder why? I am on Firefox. Maybe this is more about my viewer than the quality of the line?

Haven't worked out the .png conversion but will look into that ... did not know that would give me transparent corners (very cool)!

Larry, that's exactly what I was thinking. This is for a static front page, so I am thinking of fixed size and position for everything in these boxes (there are four of them), and if I keep font size specified in px, that should all work, right? The text is the only thing that may change very occasionally, but I'm looking to keep it brief/small and won't need it to expand. The text is all I will need to edit, and then only occasionally. Each line of text except for the top/title will need a hyperlink, of course.

So, Larry, you are saying create a div that combines the border and the pic, make that the background image, then drop a table for text in the middle of it? Or can I do the text (and leave it editable) without a table?

If I have that right, can you point me in the right direction for how to create the div that includes the pic?

your right the corners will be a little blurred when ouise a image for them - if the image is resized at all, it will be a fixed size so it will get blocky. If you were using CSS for the corners it would dnamically change and look much better - this is one of the issues with using images for corners because of IE - me I just say 'IE doesn't support rounded corners till IE9' and live with it.
you can't just convert the jpg to a png, you have to also cut away the white background.
create an image of the fiddle head surrounded by the box. That will be teh background image for the DIV. Then you can just add your links as a list.
then do any positioning with CSS and add the background image

I am saying you could create a div with a given height and width and use a background image with rounded corners. You can use Photoshop to create that image or there is an online tool for creating rounded corner images here. Be sure and generate a png image as gif images are not as clean.

You will most likely have to play with the CSS and such to get things "right" though.

Another option is to create an image with that looks like you want the completed box to look with text and everything and then use an image map tool to add the hyperlinks. The Ultimate TinyMCE plugin has an image map component you can turn on in the settings.

Thanks again for the tips!

I think at this point I am going to try creating a whole image including text and then try the image map component on the Ultimate TinyMCE plugin ... I don't have Photoshop but I have just found Inkscape, and it's about time I learned how to use it so ...

All good stuff and I am learning, so thanks again! Will let you know how I go.

I'd suggest creating the box and image and then using that as the background fot the list of links - be easier to impliment and maintain.

Yes I'd like to do that if I can, juggledad, though if i hit a wall with that it's nice to have the other option (and, that may work as a simpler placeholder for starters). But for now, still on the learning curve trying to work Inkscape. :)

Thanks again!