How JustAnswer Works:

  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.

Ask Eljon Your Own Question

Eljon
Eljon, Consultant
Category: Programming
Satisfied Customers: 595
Experience:  Founder of StockCanvas.com
9260532
Type Your Programming Question Here...
Eljon is online now
A new question is answered every 9 seconds

Hello, i am using wordpress 3.2.1 and Aroi Theme. I can make

Resolved Question:

Hello, i am using wordpress 3.2.1 and Aroi Theme. I can make it all work but have a problem with the formatting. The Sidebar appears below my logo rather than to the right of the logo. I do want the side bar horizontal at the top but it is supposed to appear immeadiatlt to the right of my logo. This formatting issue causes my dropdown menu items to appear in the wrong place. My website is www.swampdog.com.au
Submitted: 5 years ago.
Category: Programming
Expert:  Eljon replied 5 years ago.
Hi my name isXXXXX for using JustAnswer.

Are you saying you want the links "Home, Blog, Contact, Menu" to display to the right of your logo? What browser are you using?
Customer: replied 5 years ago.
Google chrome but it appears the same in ie
Expert:  Eljon replied 5 years ago.
Ok give me a few minutes to review the code
Expert:  Eljon replied 5 years ago.
Comparing your page to http://www.mojo-themes.com/item/aroi-cafe-and-restaurant-wordpress-theme/demo/. Not finding anything obvious yet. Still looking...
Customer: replied 5 years ago.
the difference is that the sidebar appears futher down the page on my webite and not beside the logo as it does in the aroi demo. the effect of this is when you click the "menu" on the sidebar the dropdown "fried" appears above the menu and not below where it should be
Expert:  Eljon replied 5 years ago.
I can see it visually. I was referring to the actual HTML code.
Customer: replied 5 years ago.
unfortunatley i'm not very good at using code :( i just downloaded the theme and am trying to make it work
Expert:  Eljon replied 5 years ago.
I understand. I have isolated it to your image...What about it though that is causing the issue is puzzling me.
Customer: replied 5 years ago.
is it the image format ie .png
Expert:  Eljon replied 5 years ago.
No I found the issue...Give me a few minutes to write up the instructions on how to fix it.
Customer: replied 5 years ago.
awsome!!!!
Expert:  Eljon replied 5 years ago.
Ok I found it. Here are the steps to fix it.

1. Login to your WordPress Admin.
2. Under the Appearance section of the menu, click on Editor.
3. Scroll down till you see the "Styles" section and click on screen.css.
4. Look for the following code and if it does not exist. Add it:

.menu-main-menu-container {
float: right;
margin: 13px 0 0 10px;
width: 570px;
}

5. Click Update file.
The key is the float:right which forces the menu to the right of the image.
Customer: replied 5 years ago.
i have cut and paste the script here for you
i am not sure where to add it
/*
Theme Name: Starkers
*/
/*
Used to style the TinyMCE editor.
*/
html .mceContentBody {
max-width:640px;
}
* {
font-family: Georgia, "Bitstream Charter", serif;
color: #444;
line-height: 1.5;
}

p,
dl,
td,
th,
ul,
ol,
blockquote {
font-size: 16px;
}
tr th,
thead th,
label,
tr th,
thead th {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre {
font-family: "Courier 10 Pitch", Courier, monospace;
}
code, code var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
body, input, textarea {
font-size: 12px;
line-height: 18px;
}
hr {
background-color: #E7E7E7;
border:0;
height: 1px;
margin-bottom: 18px;
clear:both;
}
/* Text elements */
p {
margin-bottom: 18px;
}
ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style:upper-alpha;
}
ol ol ol {
list-style:lower-roman;
}
ol ol ol ol {
list-style:lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
dl {
margin:0 0 24px 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 18px;
}
strong {
font-weight: bold;
color: #000;
}
cite,
em,
i {
font-style: italic;
border: none;
}
big {
font-size: 131.25%;
}
ins {
background: #FFFFCC;
border: none;
color: #333;
}
del {
text-decoration: line-through;
color: #555;
}
blockquote {
font-style: italic;
padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
text-decoration: none;
}
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
font-size: 10px;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
a:link {
color:#0066CC;
}
a:visited {
color:#743399;
}
a:active,
a:hover {
color: #FF4B33;
}
p,
ul,
ol,
dd,
pre,
hr {
margin-bottom:24px;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom:0;
}
pre,
kbd,
tt,
var {
font-size: 15px;
line-height: 21px;
}
code {
font-size: 13px;
}
strong,
b,
dt,
th {
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
margin: 0 0 20px 0;
line-height: 1.5em;
font-weight: normal;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
table {
border: 1px solid #e7e7e7 !important;
text-align: left;
margin: 0 -1px 24px 0;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
tr th,
thead th {
border: none !important;
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
tr td {
border: none !important;
border-top: 1px solid #e7e7e7 !important;
padding: 6px 24px;
}


img {
margin: 0;
max-width: 640px;
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 12px;
}
.wp-caption {
border: none;
background: #f1f1f1;
color: #888;
font-size: 12px;
line-height: 18px;
text-align: center;
margin-bottom: 20px;
padding: 4px;
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}


.wp-caption img {
margin: 5px;
}
.wp-caption p.wp-caption-text {
margin: 0 0 4px;
}
.wp-smiley {
margin:0;
}
Expert:  Eljon replied 5 years ago.
I am not sure this is the right file. The theme says another theme

/*
Theme Name: Starkers
*/
/*
Used to style the TinyMCE editor.
*/

At the top of the Editor screen, there is a dropdown on the right that says "Select theme to edit: ". What is selected in that dropdown?

""
Customer: replied 5 years ago.
It says aroi
Expert:  Eljon replied 5 years ago.
OK just double checking...If above the textarea it also says "Aroi: Stylesheet (screen.css"), then it's ok to just add that code to the end of the file and click "Update File"
Customer: replied 5 years ago.
no i think i had the wrong file, it was "Visual Editor Stylesheet
(editor-style.css)" i now have the Aroi: Stylesheet (style.css).
here is a copy of the file

/*
Theme Name: Aroi
Description: The Wordpress Template for Restaurant
Version: 1.0
Author: Peerapong Pulpipatnan
Author URI: http://www.mojo-themes.com/user/peerapong


*/

@import "css/screen.css";

i have tried pasting your code here but it makes no difference


Expert:  Eljon replied 5 years ago.
You need to edit screen.css not style.css.
Customer: replied 5 years ago.
i cannot find screen.css
Expert:  Eljon replied 5 years ago.
I found it by looking at the code and pulling it up in the browser.

http://swampdog.com.au/wp-content/themes/aroi1.0/Aroi/css/screen.css

I just noticed that it's there although in my Firefox debugger I did not see it there. Weird.

I did a search on the Forum for your theme and others have an issue w/ it. I would contact Aroi directly at this point because you are not the only one having an issue with that theme. I wish I could have made this easier but that is my final answer.

Here is a reference to how to get this corrected with the Theme designer:

http://www.mojo-themes.com/forum/general/issues-with-aroi-theme/

Customer: replied 5 years ago.
I know that was your final answer but i have been able to open the screen.css in my website management software. My question is where do i paste the code. Can i put it antwhere
Expert:  Eljon replied 5 years ago.
You should be able to see the code i suggested already there. Just double check before adding it anywhere...The location should not matter in this case but if you want to put it the same place as the AROI theme demo then add it after "logo_wrapper".
Eljon and other Programming Specialists are ready to help you