I'm developing a custom wordpress theme and currently using the column shortcodes plugin to achieve columns but they aren't working well. For example, they suddenly stopped going across the browser and will now only display one on top of the other except for on one page where they will work if a is placed between the shortcodes (where it should not be placed, nor was div even opened...this was typo that is now the only way to make the shortcode columns display properly). I wasn't working on any code when they started acting weird, so I'm not sure what's happening.
If anyone has experienced this with column shortcodes, let me know. Otherwise, I'm looking for a tutorial or something to teach me how to create well-coded, responsive columns that work in wordpress without using a plugin.
I recommend working with a framework like bootstrap/foundation or lightweight framework like skeleton.
shoelace.io create responsive columns for bootstrap.
If you only support modern browsers try CSS3 columns http://html5css3box.com/multiple-columns/
Related
I am creating a website in WordPress and I am using DIVI theme.
I need help to create an interactive timeline for a project. The example site is: https://evianexperience.com/en. This is the exact thing I want to implement.
Please see me web layout (https://snag.gy/IKF13r.jpg) to get an idea, what actually I need it for.
I have tried to use Interactive Storytelling (https://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/) but it didn't worked either.
You could try scroll magic, seems to have plenty of features to achieve what you need.
http://scrollmagic.io/
Also I think skrollr will still work but it's pretty old
https://github.com/Prinzhorn/skrollr
If you need exactly what they have, looks like they are using some product called greensock, probably even this module: https://greensock.com/drawSVG and also ScrollMagic to control the animation by scrolling. A tutorial I found online with different animation https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/
I don't think you could do it with Divi alone, you can definitely try just some scroll plugins which are free. Otherwise you could see if greenstock's free/business license works for your project.
So I have found a solution for CSS-only Pinterest style layout. I want to use CSS only because jQuery Masonry or whatever just seems less respectable.
I am a complete beginner who has bever coded anything, and I think it'll be easier to just stick to CSS for now and get good in it.
So I want to create a personal website, and I don't mind using JS elsewhere but for the layout I think I want to do it 'from scratch' without cheating with Masonry, and there is a tutorial for this with only a couple problems [cross browser issues and can't order the grids]. http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
This is my question- how do I implement this into a full website?
I know the basic process of writing a website, but I really don't know where to start with making a website using this code. Can someone please give me a step-by-step on how to make a homepage that links to other pages in the website with this?
And how to customise the boxes so that they act as links to other sections of the website?
I want to do it like windows 8 style, where the homepage is made of tiles, you click on a square and it takes you to another section of the website.
HERE is an example of what I am trying to make- http://builtbybuffalo.com/
So in a sense I am asking for a step by step for beginners on how to code the website I just linked to.
Or where to find that info.
Cheers!
By Simple curiosity purpose: Suppose we have a WordPress theme that is not responsive and we want to apply changes for it to become responsive.
How do I get started?
Do I Install bootstrap? Or without bootstrap and try each element to make it responsive?
I want to know how it is easier, faster and more professional.
Also I want to know and what tools you use (free) when you change WordPress themes.
From past experience,
client want to retain existing theme(non-responsive theme),
the solution was used https://wordpress.org/plugins/any-mobile-theme-switcher/
then install additional responsive theme(may it own dev or purchase) with the plugin to cater the client's need.
If no need to retain existing theme,
you may start with bootstrap or other responsive theme.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am having a website and i have applied a WordPress theme to it. But it is not responsive and doesn't view properly on mobile and other handle held devices. So is there any way to make an existing applied theme responsive ? Thanks in advance.
Of course you can make it responsive.
But, it can be a little bit of work. You are retrofitting an existing building.
Here are some things I am doing:
Set up CSS breakpoints
See more here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ > This basically sets up the ability to change the CSS at different screen widths that correspond to different device screen widths.
Basically you can do a ton of magic to the existing layout/appearance of a site, just by modifying the CSS.
Along with modifying layout, you could pull out fancy CSS3 stuff (decoration) from the basic stylesheet, only showing it at larger sizes.
There's a lot more that could be said about this. CSS is an art.
You can use the Responsive Page Tester plugin—this is really cool: http://wordpress.org/plugins/responsive-page-tester/
Make images responsive
Okay, there's been a ton of talk about this over the past few years—but this seems to work fo r me. Use http://responsiveimg.com/ (is there a WP plugin that uses this yet? Not sure.) You could take a look at http://wordpress.org/plugins/simple-responsive-images/ . I like http://responsiveimg.com/ because I can see that it really replaces the bloody images with the proper size.
You need to concern yourself not just with the appearance, but the page weight, as well.
If you need to change the image sizes to match the breakpoints you desire, you need to rebuild the images. This plugin is wonderful for both rebuilding images, and setting the sizes: http://wordpress.org/plugins/simple-image-sizes/
Selectively Hide or Show stuff
You could use this plugin, that lets you use shortcodes to hide or show things for mobile/desktop: http://wordpress.org/plugins/wp-mobile-detect/ . If you are more technical, loading this plugin lets you use https://code.google.com/p/php-mobile-detect/, and you can access all the functions there. (See http://www.lukew.com/ff/entry.asp?1392). Anyway, if you use the functions, you can hide/show at the template level, not just the edit window level.
Convert the menu to a mobile-friendly one at mobile sizes
At a certain breakpiont, you need to collapse the menu. This paid one might work for you: http://labs.sevenspark.com/UberMenu . You could also try this one: http://wordpress.org/plugins/responsive-select-menu/ . It's pretty darn nice.
Resizing videos
Here: http://wordpress.org/plugins/fitvids-for-wordpress/
Or, just serve a different theme altogether
WP Touch Pro is great — http://www.bravenewcode.com/wptouch/ . It has a tone of great defaults.
Pros:
Start from a mobile "scratch," instead of trying to retrofit a potentially heavy desktop site into your mobile
Fit in just the changes you need
Take advantage of a lot of mobile code and design that's been done for you
Cons:
It may have a totally different "look" than your current site
Custom features such as custom post types or special theme code will not be there, and would have to be recreated or left out
If the theme is not 'responsive' then there is no switch to make it responsive.
To make a theme 'responsive' requires general knowledge about what makes a theme responsive.
In general, a theme is classed as responsive if the format of the page can adapt according to the viewing window it has been given. This is either through a user resizing the browser, or the user viewing the page on different sized devices such as mobile phones.
To understand how to implement this in a general sense, and specifically for WordPress, would require a more specific question.
To make any changes to a WordPress theme, first you must learn about the WordPress theme structure, and WordPress Template Hierarchy.
Hope this helps to point you in the right direction.
One simple suggestion for making WordPress theme responsive:
First you may found out some responsive WordPress theme that matches your existing theme and then you may improve some changes that affected your look n feel due to application of new theme.
This is the first solution that you may try since it is simple than the second one. If it doesn't work out for you then you may proceed to change the CSS so as to make it responsive by creating a child theme.
I want to use wordpress as a cms. Is it possible to define standard layout elements which can be combined to edit the layout of a page similar like other cms like "drupal" for example. Ie you could design a row with a picture on the left, one with a picture on the right and one without a picture. Than I combine these templates in any order to built the layout of the pages main content.
Is this possible, maybe with plugins?
Yes of course! You just need to Edit the already made template your way or you can Create your own Wordpress Template. But for that you should be confident with your HTML & CSS skills!
Here are some resources you may refer :
http://blog.spoongraphics.co.uk/tutorials/how-to-build-a-custom-wordpress-theme-from-scratch
http://themeshaper.com/modify-wordpress-themes/
Hope this helps!