So I'm trying to get familiar with working with Flask bootstrap. However, one thing confuses me. I'm using http://getbootstrap.com/components/#navbar-fixed-top .
It tells me to add: body { padding-top: 70px; }
However, where does it want me to add it? I've added it manually to my html file, which works, but I'm working with blocks.
This is what it looks like now, which isn't the way it is suppose to be, I guess?
The place you are trying to add it looks fine. It just needs to be in any CSS file that gets loaded after the bootstrap CSS file. If you're inlining the CSS in your HTML, as it seems you are, and you're loading the bootstrap CSS correctly, from the <head> section of your page, then it will be loaded after the bootstrap, so that's ok. The only thing to bear in mind is that if you refactor the CSS into a separate file, the <rel> call to the page CSS file should go after the bootstrap CSS call.
What Flask calls blocks seem to essentially be templates, similar to those in backbone, ruby, mustache templates etc. When using these it can be helpful to let your page load in localhost, and inspect the source, so you'll be able to see how the final page loads, and where everything is loaded relative to other parts. However, the same principles should apply. With Flash you should be using the head block to load in the <head> section of your page.
Related
I'm trying to use nextjs for just a part of my web-site.
The navbar already exists in other frameworks, not even react. i want to use nextjs in a <div id="nextjs_div">...</div>, ie. just a part of my website.
The problem is that nextjs renders a whole HTML page with head and body components. so what I want basically is to delete these components and render just one div that will be mounted in my page.
I tried to modify the page/_document but couldn't succeed.
Do you have an idea of how i can do this.
Next.js is a framework intended to create full pages and most likely not appropriate tool to use for creating a part of a page. You could use just React then.
If you can make an HTML from the navbar then you could insert it into Next.js project.
See Add HTML header to Document.js example
In my Rails webapp I would like to have a view that only gets its css from a specific css/scss file. I have tried several suggested solutions on here but none to my avail.
However, would I be able to place the example.css.scss file outside of the assets/stylesheets directory and restrict the view file example.html.erb to the example.css.scss styling only for example.html.erb?
From what I understand by reading rails asset pipeline all files in the myapp/app/assets directory inherits its css rules from the application.css file and as well the corresponding css file when the controller is generated creating a view file, css file, etc. etc.
I've created a webapp using Ruby on Rails. The app is almost done and is staged. I had an idea that a landing page would be a nice opener to the webapp.
My goal is to create a landing page for webapp. The landing page consists of a background image with a text centered link, which I would like to link to the home page of the webapp and not receive any styling from the application.css file.
Basically I want this view file to have nothing to do with the application.css file.
Thanks in advance.
While there may be reasons to use a totally different css file that's not part of the asset pipeline (e.g. landing page working while rails is restarting, keeping landing page lightweight, etc.), my guess is that you're more motivated by getting something to work.
I'm assuming you've got styles for most of your app that would conflict with the landing page, so if the styles from app apply also to the landing page, the landing page looks funny, and vice versa. So my guess is that you're looking for a way to have some styles apply to the app, and other styles apply to the landing page.
For this, I would first of all bypass your regular layout - see bypass application.html.erb in Rails app
Then, I would update your regular layout to somehow indicate that it is the app and not the landing page. There are any number of ways to do this, but I might do the following:
application.html.erb:
<body class='app'><!-- etc. -->
landing_page.html.erb:
<body class='landing_page'><!-- etc. -->
Then, in your scss files, update it thus:
application.css.scss:
body.app {
/* All your regular app styles */
}
body.landing_page {
/* All your landing page styles */
}
Of course you can split those into multiple files, etc..
TL;DR
Unless you're running into loading time issues or you have some other reason why you really really don't want app styles loading for the landing page, then just put it all together but scope the styles so that they don't apply when they shouldn't.
You are already working in the Rails domain, so it would probably be easier to continue to stay in that domain.
In my opinion, the best/easiest thing to do would be to create a welcome controller. Create an empty index action in the controller and a view for that action. The view you are creating seems rather simple, so you can just prefix the class/id names (which don't seem like many) with welcome_ and this will differentiate them from your normal class/id names. The link for the homepage text will point to the index action of that particular controller.
Then you can create the root route in your routes.rb file to point to welcome#index.
I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.
I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.
Can I do this with four different Meteor templates?
The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:
Template.templateName.onRendered(function() {
$('head').append("insert your script here");
});
So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.
I made a drop down menu using HTML and CSS. Something like this: http://sneznipark-kg.si/
How can i put a menu in external file(so that i don't need to make changes to it on every page individually)?
I could use iframes, but the problem there is, that elements that "drop down", are only visible in iframe, not on the main page.
I found some solutions using PHP, but i cant use those, because contract with my server provider doesn't include databases (so i cant use PHP, right?).
I think you are looking for:
How to Make Website Navigations with PHP Includes:
http://www.youtube.com/watch?v=IMh2cGIX41g
Simple PHP/HTML navbar for a static website:
http://www.youtube.com/watch?v=v8PUIVn3NFE
As mentioned above, you should be able to use PHP.
If you're not opposed to jquery AND both files are on the same domain. You can use .load().
http://api.jquery.com/load/
You can use any container as a place holder. Like a div, then load the html page into the div. It will put the entire page into the div. So you probably just need to add the menu part, and not the entire html markup.
I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.