I have created a web app with ReactJs which I now want to make a part of a Wordpress page. The web app ist styled using react bootstrap.
The idea was:
To use a wordpress template which just renders the div where my App loads into:
Wordpress Template:
<div id="app"> </div>
Styling for the App is restricted to the div "app":
#app {
//Bootstrap css + additional css used for the app
}
This way the style of my App doesn't interfere with the css of the wordpress template and the Header / Footer of the Page look perfect.
The problem:
The css of the wordpress theme conflict with the bootstrap css used in the div "app". Because of this the web app looks like a mess.
Is there an (easy) way to ignore the css of the wordpress template within the app div?
Related
I am new in WordPress,
I want to know how to add footer other then default footer
( example: Footer file name - home-footer.php and need to use for home page, same as contact-us-footer.php for contact us page ). let me how i can achieve this.
if you are adding your files in theme or WordPress core files then this will automatically remove when your WordPress will be updated unless you creat child theme so just better to create to footers with any page builder I recommend elementor and then hide that with page id you will find that in the body tag of every page like this
.page-id-111 .footer{
display:none;}
Let me know if you don't understand anything
You have to name the file footer-home.php. Then you can call this footer in the page template (i.e. page-home.php) using get_footer('home').
Wordpress will use the right file, if it is named correctly starting with footer-*.php.
I am trying to import a page I made in bootstrap into Wordpress and I can't seem to figure it out.
I would like someone to give me some hands-on support if they have the time. I get different results with different attempts.
I changed my index.html to home.php and suddenly the entire site goes down. Restored it again and did something else and then the site showed up without its CSS. i understood i had to create a functions.php file where i call the stylesheets but im not getting any further.
What do i need to do to succesfully import a bootstrap page as theme in wordpress?
You need to create a WP theme, or just a WP page template (in case of just one page.)
https://developer.wordpress.org/themes/template-files-section/page-template-files/
In your current theme, if you have page.php , duplicate it by saying e.g. page-custom.php
In the template header section name the template:
<?php /* Template Name: Example Template */ ?>
Below it add your bootstrap page's code, you may need to fix paths to css/js files but I am sure you will figure that out by googling.
Once you have that page as WP template. Now create a page in WordPress to which you want to apply that bootstrap template.. and in the page edit sidebar, there is section you can select that custom template you created.
see this photo:
https://developer.wordpress.org/files/2014/10/basics-page-templates-03.png
Now if you will visit the page on the front-end , that page will have bootstrap design applied from your custom template.
I want to use the page I design from scratch using HTML, CSS and JavaScript as the default homepage to WordPress.
The page is not on WordPress. I created it myself.
Make it a template file by adding this line to the first line
<?php /* Template Name: Homepage Template */ ?>
place it in your theme folder
Go to WordPress admin and create a new page, select template option to be Homepage Template, save it.
Now go to WordPress settings, Reading and select it as homepage.
Hope it helps
I am actually trying to integrate my static HTML pages with TWENTY TWELVE theme
As far as I understood, I need to add my header section into header.php and footer to footer.php and for the content part I need to add template and for adding CSS & JS function call need to add them function.php
But after doing all this things my CSS classes does not get applied to HTML code which I have added to header section as well as footer section.
After inspecting I came to know my CSS classes are loaded properly but does not get applied.
I'm trying to customize the framework.css for how high or low the sidebar appears on specific pages. Would it be possible to do this using a custom page template and a specific div class declaration? Such as creating a custom template and within that template creating a class to "override" the default css sidebar element settings for those pages? How would I go about doing this?
One option is to make sure the theme is using the function body_class() inside the <body> tag.
When I select the page template Sidebar Template (wp-content/themes/twenty-eleven/sidebar-page.php), the class page-template-sidebar-page-php shows up in the body tag:
According to brasofilo's answer, every page has its own class, in case of brasofilo's code, it is the page-id-674. It's generated by wordpress in general.
If you want to do styling on specific pages, you may use something like this:
body.page-id-674 div.specific-div-class {
/*code*/
}
Hope that helps!