-
Posts
-
So I have drawn, yes drawn my website design using photoshop and shown it to lots of friends who design and make websites.
From what I have shown them they recommended getting enfold. I am basically trying to re-create my design exactly but struggling on many levels.
I don’t seem to be able to paste my picture of how I want the site to look here, if I could it would make it a lot easier to get advice.
So a few problems to start with:
Enfold seems quite rigid in how you can lay a website out. For example starting with my header, I want to put a logo and some wording relating to my company. I also want to have an option for re-sizing text on the header and an area with phone numbers. This doesn’t seem possible with enfold, I only seem to be able to pick from a selection of different options.
Next I want to have tabs that have drop down menus. I would like the tabs to have a background where grey fades to a darker grey (this doesn’t seem possible). I also had in mind the tabs looking quite fancy and button like, again doesn’t seem possible.
The general layout of how I want my site to look also seems almost impossible to achieve as well. Difficult to explain again without the picture. So I want a header, beneath the header I want an area for tabs, under the tabs area I want a main section on the left and another menu type area on the right. Enfold only seems to have a small selection of choices not of which can be very specific to what you want.
I know this all seems like a general moan. Is it possible for someone to have a quick chat to me, possibly I could e-mail the picture of how my site looks and they could say this just isn’t possible using enfold or try this this and this etc.
Thanks
Hi Josue,
Here is the link https://www.dropbox.com/s/a471axekl5nmd7n/2015-09-22%2009.44.09.jpg?dl=0
Thanks,
Christian
Hey!
You can do this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, to add extra info to your header.
I’m not sure what you mean by the tabs having dropdowns though. Can you highlight in your screenshot your intentions?
Regards,
ElliottHi Elliott,
The link you sent me is great thanks. Though at this stage I should point out I’m not proficient at coding or anything too advanced, I was hoping for a simpler answer. Though I am really grateful for any help.
I have uploaded a link in reply to what I mean regarding dropdown areas from tabs. https://www.dropbox.com/s/7w3tu9f0b214eos/2015-09-22%2020.55.43.jpg?dl=0
Its the bit I’ve boxed in red under “our care homes”Thanks,
Christian
Hey Christian!
The menus in Enfold do support dropdowns, just build it like this in Appearance > Menus. You can get something to start by importing one of the demo available.
Best regards,
JosueHi Josue,
This is my site so far http://test.seymourcarehomes.com/blog as you can see I have managed to get the drop down menu’s, however I have had to create a separate page for the main tab. For example our care homes is a separate page to Rickmansworth and Northwood. Is there a way to have a header in the menu?
Also, one other question for now.. May be a really simple one, I am finding it really difficult to change the font of different areas?
I would like to use a uniform font and be able to use this for the header, main area, footer etc. surely this is doable?Thanks,
Christian
Hi Christian!
1. Here’s a handy plugin that lets you have different menus per Page, you can create a new Menu for each Page and assign it accordingly:
https://wordpress.org/plugins/zen-menu-logic/2. Fonts are handled in General Styling > Fonts, there you can set the font for the headings and body text, if you need to target a more specific element you can make use of the Advanced Styling tool.
Regards,
JosueIs it possible to choose from a greater selection of fonts? The choice seems quite limited. Also when changing the text for say the main body area where would like the header to be a larger font size than the text below it I am struggle to do this.
On the sidebar below my main links where I have got philosophy of care, dementia care, our staff, latest news etc I would like to place 2 pictures with links to existing pages on my site. I have put links to the pictures in the private content area. Using the widgets there is no option to do this with the closest option being the advertising widget. With that the max picture size is 125 * 125 which is too small for what I want.
One more question for now. At the very top of the site where I have put phone numbers to Rickmansworth and Northwood is it possible to have this text on different lines as opposed to both numbers being on the same line?
Thanks for all your help
Hi!
1.) Yes, you can use google fonts or fonts using @font-face.
2.) Use a normal text widget and implement standard html code to display the pictures in question.
3.) Try to add a </br> between both elements.
Cheers!
AndyHi,
I have posted a picture here so you have something to refer to https://www.dropbox.com/s/wv2y9f2keaaurib/2015-10-07%2022.27.48.jpg?dl=0
1 So on the picture you can see an area in red either side of my menu bar. I want that area to be the same green as on the rest of the menu and not the white that the rest of the header is currently.
2 Also on that page, you can get to that page via http://test.seymourcarehomes.com/blog/?p=47 is it possible for me to change how the submit button behaves? Ie like the colour it changes to when I hover over it? The font of the submit text etc
3 Last question for now, how do I change the appearance of my side bar menu? Ie background colour, font, font size etc.
Many thanks
Hi,
Try the following CSS in Quick CSS:
1.
#header_main_alternate { background-color:#296750 !important; }2.
.page-id-47 .form_element .button { font-family: arial, verdana !important; }3.
.sidebar #nav_menu-2 { font-size:16px !important; }Thanks,
RikardHi Rikard,
Thanks for the advice, where would I input this CSS? I don’t know where to do this through wordpress.
Thanks,
Christian
Hi Christian,
You can paste the code in the Quick CSS box under Enfold–>General Styling.
Thanks,
RikardHi Rikard,
Thanks for that.
Please have a look at the link to this picture of things I still want to change. https://www.dropbox.com/s/2uu6zcbybnuvxsd/2015-10-14%2012.06.53.jpg?dl=0
1. There is an area at the top where the line on the header is not completely straight? Do you have any ideas why this could be?
2. I don’t really know what I am doing with CSS and on the side menu bar I am struggling to create the effects I want. I have changed the text size and font successfully however I am really struggling with the colour. When just loaded I would like it to be black and when you select one of the options I would like the text to be white with the green background as it is at the moment. On my picture you will see an area of red to the right of the green are, is it possible to make this green as well?
3. Lastly for now going back to the submit button on my contact us page I am struggling again with the font colour and I would like it to the white. I would also like to get the same hover over effect as with the default but in a green style.
Thanks for all your help.
Christian
Hi!
1. I don’t see any white line on your website:
Clear browser cache and hard refresh a few times.2. As you can see on my screenshots there is no red/green area for me. Did you change anything?
3. Use this code in Quick CSS field to change font color:
input.button { color: white !important; }Cheers!
AndyHi Andy,
Thanks for that.
Please have a look at the link to this picture of things I still want to change. https://www.dropbox.com/s/2uu6zcbybnuvxsd/2015-10-14%2012.06.53.jpg?dl=0
1. I still see the white line, not sure why?
2. The red part on the picture I what I have coloured in in red. I would like it to be green however it just goes white for me. So when anyone of those options is selected I want the green bar to extend to the side of the browser. I am still struggling with getting the text to be black when the site has just loaded. Then when you select one of the options I would like the text to be white with the green background as it is at the moment, but with the extended green bar.
3. Lastly for now going back to the submit button on my contact us page your font colour css worked perfectly. However is it possible to get some sort of hover over effect ie green going to light green?
Thanks for all your help.
Christian
Hey!
Try adding this code to the Quick CSS:
.sidebar .widget_nav_menu ul:first-child>.current-menu-item, .sidebar .widget_nav_menu ul:first-child>.current_page_item, .sidebar .widget_nav_menu ul:first-child>.current-menu-ancestor { color: white; } #top .sidebar .widget_nav_menu li a{ color: inherit; } .sidebar_right > .container{ padding-right: 0; } .page-id-47 .form_element .button { color: white !important; } .page-id-47 .form_element .button:hover{ background: lime !important; }Modify as needed.
Cheers!
JosueHi Josue,
I am still having problems with the side bar. Initially when the site loads it is fine however when you select any of the options ie philosophy of care, dementia care, our staff etc I don’t get the effect I want.
If you refer again to the picture I uploaded https://www.dropbox.com/s/2uu6zcbybnuvxsd/2015-10-14%2012.06.53.jpg?dl=0 and look at point no.2
The red part on the picture I what I have coloured in in red. I would like it to be green however it just goes white for me. So when anyone of those options is selected I want the green bar to extend to the side of the browser. Also when you select one of the options I would like the text to be white instead of black with the green background as it is at the moment, but with the extended green bar.
Thanks,
Christian
I guess what you meant is when the item is being hovered on right? if so, use the following code:
.sidebar .widget_nav_menu ul li:hover { padding-left: 51px; left: -51px; width: 100%; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); background: #296750; } .sidebar .widget_nav_menu ul:first-child>.current-menu-item, .sidebar .widget_nav_menu ul:first-child>.current_page_item, .sidebar .widget_nav_menu ul:first-child>.current-menu-ancestor, .sidebar .widget_nav_menu ul li:hover { color: white; } #top .sidebar .widget_nav_menu li a{ color: inherit; } .sidebar_right > .container{ padding-right: 0; } .page-id-47 .form_element .button { color: white !important; } .page-id-47 .form_element .button:hover{ background: lime !important; }Best regards,
JosueHi Josue,
Thanks for that.
Please have a look at the link to this picture.
https://www.dropbox.com/s/pt74za8bift7qpa/2015-10-17%2010.30.15.jpg?dl=0This is how I want the hover over effect and the selected effect to look.
Thanks for all your help.
Christian
You’ll get that result with the code i posted, just make sure you copy it from the forum reply and not from the mail notification.
Best regards,
JosueHi,
Please have a look at the link to this picture.
https://www.dropbox.com/s/40d6ij2jylv04d5/2015-11-03%2011.27.39.jpg?dl=0
1: I would like to have this column fractionally over to the left so that I can fit the text below the picture onto two lines.
2: I would like to centralise this text across the whole bottom line and also get rid of the bit that says – Enfold Theme by Kriesi
One more question not numbered, on my home page I have an easy slider that revolves automatically. Once you select to move any picture manually the automatic revolve stops, is there any way to keep the function going even if you click to change the picture yourself?
Thanks for all your help.
Christian
Hey!
would be good if you could open new tickets for new questions. Thank you!
1. Use this code:
div .av_one_third { margin-left: 55px; width: 309px; }2. It seems you could already remove it. If not clear browser cache and hard refresh a few times.
3. It could be possible but would require a huge amount of time and customization. You could hire a freelance developer for this job: http://kriesi.at/contact/customization
Regards,
AndyHi Andy,
Thanks for that.
1 – I have inputted the code and it doesn’t seem to have the desired effect as the work commission drops to the 3rd line. Please have a look at http://www.seymourcarehomes.com/
2 – The bottom line with the text “Seymour House is a trading name of Seymour House Residential Care Homes Limited” definitely isn’t centralising and it stills says “- Enfold Theme by Kriesi” after it.
Thanks
Hey!
1. Your footer looks like this for me:
Isn’t that the result you wanted to achieve? if not can you show us a mockup with the result you want to achieve please? then we can provide you some precise css code.
Don’t forget to clear browser cache and hard refresh a few times afterwards.2. Refer to this tutorial: http://kriesi.at/documentation/enfold/change-the-footer-text-and-link/
For centering the text use this code:#socket .copyright { float: none; }Best regards,
AndyHi Andy,
Thanks for that.
The tutorial for getting rid of the link worked perfectly.
However the CSS code is still showing the socket text to the left on my browser and also on another pc I tried. Both are using Microsoft edge. I want the text to appear as it does on your imgur picture.
Thanks,
Christian
Hi!
add this code as well:
#socket .copyright { position: relative; left: 10%; }and adjust left value as needed.
Cheers!
AndyHi Andy,
That does work, however now when I view the site on my mobile the effect it has on the text on the bottom is that it moves it to off the screen. Is there not one universal piece of code that will always centralise it at the bottom under any browser guidelines??
Thanks,
Christian
- You must be logged in to reply to this topic.