I am writing a web application for use by multiple organizations which requires custom styling depending on which customer is using my page (the page is "branded" for different companies).
Basically, I have a database which stores some information such as primary color, background color, and company logo image, all of which vary depending on who is using my site.
When someone comes to my site, I look up their styling information and put it in session scope as a parameter named "brand"
I have a jsp called brandCss.jsp which does things such as:
#logo
{
background-image: url( '${brand.logoImage}' );
}
body
{
color: ${brand.primaryColor};
}
etc.
Then in the <head> tag of my page, I link to my JSP as if it were a css file:
<link type="text/css" href="/brandCss" rel="stylesheet"/>
Using the spring framework, I map a request for /brandCss to my brandCss.jsp view, so that this request returns my JSP as a view.
This works great in IE--someone hits my page and my server code goes off and finds the branding (styling) information they need to see, then splats it into my JSP which is then treated as a css file.
However, in Firefox/Chrome, my brandCss.jsp stylesheet is not used--my page IS pulling down the jsp correctly, and it gets exactly the same information as IE, but for some reason the browser chooses to ignore the styling in it.
Anyone have any idea why this or how to make Firefox treat my JSP like css?
Make sure your page is setting the Content-Type to text/css. If the page isn't being served with the correct Content-Type, I would suspect Firefox would ignore it. This is easy to check with the help of something like the Firebug (see the Net tab for the files that are requested).
I'm not exactly sure how you would go about setting the Content-Type in Spring, or from a Java web app, but that is what I would check first.
Related
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 created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I have converted a web application over to spring boot mostly successfully. The only issue I have encountered is that after login (using spring security) I am supposed to be redirected to a page that contains a link to a local version of a font-awesome.css. However, the first time I login the css file is displayed rather than the actual html page. If I step back and then step forward, the page is properly displayed from then on. My question is what could possibly be causing this behavior?
Here is the link to the css from the html page (which is in the head section):
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" th:href="#{/css/font-awesome.css}"></link>
I also tested by removing the 'th:href...' attribute but the behavior persists.
I have a textarea where I let users write some HTML.
They can then click a "Preview" link that triggers ajax that sends the raw HTML to a controller that uses JSoup to sanitize it (it returns the sanitized string).
I then display the sanitized HTML in a modal dialog box.
This all works wonderfully except that the modal dialog box has CSS styles cascade down from the rest of my site, and I want to display the HTML preview without any styles.
I've searched a lot (e.g. I found Any way to display some heavily-styled HTML in isolation from the rest of site's styles?) but wasn't able to figure out a solution.
I appreciate your help!
-Ryan
You could write the preview to a text file on the server then open an iframe to it with a template absent of the site's css.
I bet your problem stems from generic css selectors though. Things like
div p{
background:#fff;
}
Or maybe not so generic, but so non specific that it is being caught by your preview.
I am somewhat new to web development, so I'm not sure how "stupid" this question is, but I couldn't find much when searching, so I wanted to ask.
I am creating a page that, when a user presses an Export button, it exports a snapshot of the site as a PDF. The PDF library takes a URL. That works well. However, I want this page inside a larger site. When I print, however, I don't want the larger site to be printed. Is there a way to supply an "internal" HTML address so that my web page can still be accessed. What should I look at to do something like this?
Thanks.
The best way to "hide" the rest of the page when the user prints a web page is to create a print stylesheet and include it in the page header like this:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Then simply hide the elements of the page that you don't want printing in your print.css file.
I'm wondering if by "larger site" you mean the template surrounding your content. Is that true? If so, a common approach is to provide a parameter that can be added to your request, like print=1, which would suppress the outer template when delivering your content.