I have a client that is looking for a Wordpress plugin or theme that will display an image over a rotating slider, similar to the home page here: https://www.threebakers.com/
Any thoughts on an out-of-the box solution, or do I need to build this one by hand?
Ironically, I did this exact thing on this site here:
http://www.gilbertmeatlocker.com
Its using the popular Flex Slider, but its not Wordpress. I was working with Drupal on that particular site, so its a custom implement of the stand-alone javascript Flex Slider.
I had to fiddle around with z-index and I used negative-margins to move elements into position.
That particular implementation on gilbertmeatlocker.com is extra complex because the silver frame around the edge is also overlapping the Flex Slider. I would recommend not doing a frame like this if possible, though. It added some serious bugs that were difficult to make work on all browsers.
Putting a single image over the slider like your bakery example or the gilbertmeatlocker.com logo shouldn't be a problem though.
If noone else recommends something better, you could try Flex Slider. There is a Wordpress version of it.
Related
Using Divi in Wordpress.
I have 2 (among many) blog posts, one built without the Divi Builder(earlier on), the other built with Divi Builder.
This one was built without the Divi Builder and works nicely. I set float:left on article div.et_post_meta_wrapper and it looks as I want, with the Text wrapping around the image.
Working Post
This one, with the exact same CSS but was built with the Divi Builder, when I turn on float:left, it makes the entire Div disappear.
Broken Post
Can someone find the problem for me?
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.