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.
Related
Is it okay to sometimes style blog post differently, using inline styling?
Changing font size, color, margins and so on for some elements in the specific blog post.
In my case, I have started making a long blog post, and I want to change a lot of styles just for that one post because I can make it more beautiful without touching child theme.
Is that a bad practice (from design and SEO perspective) or is it a normal way of doing things?
In general, inline styling is bad, it will be hard to manage for the long term. Most blogs attempt to maintain some sort of styling across all posts. This is easier to manage if you leverage an external CSS file.
WordPress is great to spin up a free web page fast. But later on you'll find it very limited. Still it's better than a web site with monthly payments (IMHO). For example a menu bar solution is provided without have to code everything from scratch. Great, but the font default was an ugly Times Roman. Ultimately I let the theme fonts stay the same in then Menu. Then down in the body I had to sprinkle My text body. everywhere below in the page. It was more cut and text paste pasting but easier than creating my own custom theme...
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!
We're starting a website project and came accross the paid Rio theme.
What we're wondering is how far can we go in customisation without having to touch the theme's CSS, and if buying the layout and theme is worth in our case at all.
Rio is not specifically the only option we want, we just want to be able to do the following:
We'd like to change the look of the website depending on the logged in user.
Theme customisation:
The .ui-panel-titlebar ("Downloads" example in Rio's Dashboard page) seem
to be hardcoded to be purple #5C6BC0. Is there any chance to change
that background by adding or changing a class? The important part is
that we don't change the core CSS files of the theme and preferably
don't create additional CSS classes nor make use of precompiling
frameworks.
Can we edit the logo on top left only to make the menu move slightly to the bottom? I tried with a bigger image through Chrome's
DevTools but the image overlays to the bottom.
Is is a good practice to think this way: We're thinking to have a WebpageThemeController with methods that would return the correct
class strings depending on the user, to put in the different parts of
the website.
Is considering Primefaces' layout+themes good in this case? If not, how should we proceed?
Thanks
Next version of RİO will have less integration to easily customize colors, fonts ...
You can even use multiple layouts per user by the way, here is a tutorial;
https://youtu.be/jbNdtndIsqk
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/
I'm terribly new to web development. I'm trying to make a pretty simple site with a friend. My friend has taken the time to design the layout for our site, and we have things looking how we want in a static HTML page.
What I'd like to do now is move over to a Content Management System like Drupal but keep the same design that we have all ready laid out.
Since I'm completely new to this field, I'm looking for some best-practices advice as to how to make this leap.
It's apparent to me that I could probably edit some existing Drupal Theme to make it give me the layout that I want, but is that the path I should go down?
Thanks!
Update: Also, is it more than just replacing my style.css with their style.css?
Update 2: The end goal is for people to be able to log in and create news entries, very similar to a blog that will then appear on the front page. There will be other items on the left- and right- but they don't need to be directly accessed by anyone, really. They'll stay pretty static.
The Zen theme is sort of a meta-theme that's designed to be fully standards compliant and make pretty much every aspect of theming readily customizable, with lots of informative commenting. It's the best place to start if you want to develop your own theme. Even if you find a theme that looks a lot like the one you want to create, it's probably still better to start with zen because it's extremely well laid out and instructive. That being said, I've never built a theme from scratch, but it sure looks like a lot of work.
Update
In general the best approach will likely end up being to use your designer's HTML and CSS as a reference, and to edit the Zen-based templates and CSS files to recreate that appearance. It's a bit magical.
You will end up breaking the styles used in your designer's layout into chunks that are part of various template files. The mostly-static stuff on the side columns will become what Drupal calls "blocks"; you'll likely use the top part of the page to refine the HTML for the header section of the main page template; and you'll use the central part to add any necessary tags to the content section of the main page template.
I tend to make liberal use of the Firebug extension for Firefox, or the developer tools built into Chrome. These tools let you quickly locate a given CSS element that you want to change, and edit it to see how the change will look. At first though it's probably better to just read through the whole CSS file to get a feel for how it works. Again, Zen's CSS is very easy to digest.
Pour your heart and soul into the Drupal Theming Guide for the next few days. Theming, like most things, is best done if followed by a gratuitous amount of time in the documentation.
Start with either Zen or Framework themes. They provide good starting points for working with the CSS to adapt to your design.
This helps too:
http://drupal.org/theme-guide
Whatever you do, don't take Garland theme as how a good drupal theme is done. I went down that path when I first started Drupal...