So, i'm building a website using magento, i tried to install a theme but there are some files that dont seem to be loading, including some css, i'm gonna list the website and the demo of the theme so you guys can tell me if you see something where you can help:
The website
The Demo
As you can see, there is a lot going wrong... the name of the divs isnt even the same, i have followed the readme tutorial and done this multiple times, the theme was installed using magento connect.
I've done the whole System>Configuration>Design and pointed to the new theme...
If you could give me some clue about what's wrong, i'd be very thankful, any further details needed, just ask.
Package from Magento Connect includes only design and skin files without WebAndPeople Custommenu extension.
Which names of divs do you see as not similar? I installed this theme for test and it is similar to yours with div names. Don't look on the devdemoz.com's demo because it is modified theme and is not original that included in package! You can compare their style.css and your with diff or notepad++ to find differences (about 20% of original skin).
Footer. You made mistake in HTML code and placed tag <h3> outside of <ul>. Just move them one line down like in /readme.html file.
If you wish to use modified mobileshoppe demo from devdemoz.com you can simply grab their style.css and images and put in your folder.
Related
I have a theme which has a cloned header (and provides absolutely zero way to customise it). When the cloned header appears on scroll, it is aligned left.
Looking at google console, it reveals this flex container:
div.whb-flex-flex-middle .whb-col-center {
flex: 1 1 0%
If I delete this in the theme's code, it works as I'd like. But updating the theme refreshes the edit. I have installed a child theme, but wondering how I'd go about removing this without having to re-do it every time I update. I'm using WordPress.
Is there any CSS code that would solve this.
Deleted code in header-base-min.css - works as expected, but theme resets edit upon update.
Try to edit the CSS document of the theme by making a copy or just copy/pasting the CSS into a new document. then, make whatever changes you want and use your new and (hopefully) improved CSS as the website theme.
If this doesn't work, then maybe you could download one of those extensions that lets you write custom themes for websites (I use stylus) and write some simple CSS declaring whatever you don't like to have 0 width, or a similar approach.
I'm assuming you don't need perfectly clean code- if you do, then it might be best to just write your own website theme. I've done it before and it's really fun. Take an afternoon to make a site look goofy. This is your sign.
I've just started using the WordPress page builder "Elementor" and have decided to move from "Genesis" to their own theme called "Hello Elementor". However, their theme uses SCSS and GruntJS.
On their documentation, they've included a custom.scss for all the custom styling. But when you add anything to this via WordPress, nothing happens. I know I could download the theme and use Visual Studio Code to make changes and use a sass compiler to automatically compile this for me, but it would require me to constantly upload files via FTP. Ideally, I would like to stay away from this.
Is there something I am missing? Or something I could do for WordPress to automatically compile this for me?
Edit:
If anyone has any recommendations of other themes to use with Elementor, I would really appreciate it.
They removed this option in Hello Elementor. You can no longer integrate custom scss. And I don't know since which version it's not present anymore, considering that I've tried the latest two ones and none of them seemed to accept the scss custom file.
However, you can check the answer they gave me a few days ago on the Hello Elementor GitHub page, if you want.
https://github.com/elementor/hello-theme/issues/85
Here is my current issue : I am using a custom child theme (from Parabola, Cryout Creations, last version), but it seems that the editor-style.css file is not up-to-date. Rather than rewriting everything, I would like it to contain every css used on the front-end, so TinyMCE looks as close as the published page/article (this is important).
In order to do that, I have created a new editor-style.css file in my child theme, so it overrides the not-up-to-date file. So far, it includes the style.css file from my theme, but it lacks a lot of CSS from WordPress Core : the ones written on line 60 on the index file : http://nouveau.domaineloupia.com.
So, how to add this “core CSS” to my editor-style.css file ? And would it be the best way to do this ? I have seen many stuff talking about the add_editor_style function, but I do not know if I could use it to do what I want nor how.
Thanks for reading so far, and thank again in advance for any help you could provide !
You could just use #import url("YOURCORECSS.css"); in the top of your `editor-style.css' file?
But that tends to slow down your pages.
How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.
For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.
Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.
There will be a few ways to tackle this, but here's what I've been doing...
Take a copy of your favorite starting point theme
Download the full bootstrap repo (less and everything) and pop it into your theme folder.
Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code #import url("bootstrap/css/bootstrap.css");
You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.
It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.
Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.
You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/
There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/
Hope that helps you get started!
I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.
There is a quick way to do it, using composer in your theme:
composer.json
{
"config": {
"component-dir": "lib/composer",
"vendor-dir": "lib/composer",
"bin-dir" : "bin/composer",
"cache-dir" : "var/cache/composer"
},
"require": {
"twitter/bootstrap": "3"
}
}
Note: I removed the other composer's section and requirements and phing integration to reduce complexity.
Execute
composer install
And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences
$bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';
wp_enqueue_style('sindy_bootstrap', $bootsUri);
et voilà! :)
Does anyone know how to remove markup from the theme search box? It produces a lot of extra DIVs and CSS id's.
Thanks, Mark.
It is very easy thing to do.
First, search your theme (/sites/all/themes/yourtheme). Do you have search-block-form.tpl.php? If so, you can edit it according to your own fashion.
If you don't have search-block-form.tpl.php, you can create it. Follow the very simple instruction in: http://www.bananatools.com/drupal/customizing-search-block-form.html to create it and afterwards change it as you like.
Assuming you installed a custom theme, go to /sites/all/themes/yourtheme and edit the .tpl.php and .css files. If you didn't install a custom theme, you can't re-theme it without making a huge mess.