I have just started working with ruby on rails properly like for a week and now I have started working on RefineryCMS, I followed the official guide and created a demo application and got to know the interface and the CMS itself a little bit, now I am trying to create a proper site using RefineryCMS. The first thing I wanted to do was to change the appearance of the default homepage, hence I override it and added my own HTML that I have and replaced the default layout that worked fine to some extent. Now the problem is I had style sheet associated with my HTML, as I am new to this CMS I cannot find a way to properly link my style sheets/ override my style sheets associated with the home page. I have followed the official documentation but was unable to get through the idea of how to override the stylesheets, I have followed other various links as well.
Can someone please guide me to a tutorial where there is a stepwise explanation regarding how to do that, or even better a stepwise detailed tutorial for newbies like me to get started with the RefineryCMS, I have spent hours but still have found a proper way, maybe I havent been looking or googling the right question because I am new to this CMS i.e. "How do I properly link my overridden HTML in refineryCMS to its corresponding stylesheets also to the corresponding images and javascript files"
I would really appreciate any sort of help to get me going. Thank you.
Thanks for using Refinery. There are two ways to do this, but really the first one is my preference.
The easy and recommended way, using CSS selectors:
First, check out the getting started guide's section on "styling views".
Now, just create an asset file for the home page, let's call it app/assets/stylesheets/home.css.scss. To that, we can add nested styles under the following ID selector. I've added background: red; so that you can see an immediate result:
body#home-page {
background: red;
}
This is the way that I would recommend adding CSS for templates.
For the non-recommended, complicated way that requires extra assets and adding to the precompile list:
First, see the overriding views guide.
Now, with the refinery/pages/home.html.erb template that you will have, you can link to a stylesheet:
<% content_for :stylesheets, stylesheet_link_tag('home') %>
The stylesheet should now be linked in the <head> section of the page and you should be able to add CSS that just relates to the home page by creating the app/assets/stylesheets/home.css.scss file and applying it in the same way as the first section:
body#home-page {
background: red;
}
Note that because this is in the same directory as the manifest file application.css it will automatically get included for all templates, too, and so this is more complicated. It also requires you to add to the precompile list in config/application.rb:
config.assets.precompile += %w(home.css)
Related
Good day All
I'm am working on my first laravel project and I ran into a problem that I cant seem to fix.
I have a few basic views, controllers, and routes that work together with a basic HTML navbar. The problem I am having is that when I click on the next page in my navbar it works fine and it goes to the link but when clicking on another link from that page it adds to the path and then it can't find the page. My routes work through the basic controllers that return a view only for now
For example
Example:
Home page=http://127.0.0.1:8000/
Click on Movies=http://127.0.0.1:8000/movie/index
Click on Movie Actor=http://127.0.0.1:8000/movie/actor/index
from movies to the next view it does not work as you can see the link path is wrong it should be http://127.0.0.1:8000/actor/index
please if anyone has any suggestion that might help.
Please edit your questions with the code and include the relevant code for the future. The code you posted doesn't contain any links (Edit: in your first few comments), which gives me a reason to believe you pasted the wrong thing.
The problem (without seeing any of your code) is likely here.
<a href="movie/index".....</a>
The way this (a) element works, which has nothing to do with Laravel, but is purely HTML, is that it will add movie/index to the current path you are linking from because you are giving it a "relative" URL.
If you add this link from, e.g. yoursite.com - it will link to yoursite.com/movie/index if you do it from yoursite.com/dashboard, it will link to yoursite.com/dashboard/movie/index.
Instead, you do not want a relative path, so you need to start with a / like this.
<a href="/movie/index".....</a>
You can read more about HTML tags here: https://www.w3schools.com/tags/att_a_href.asp.
Check named routes in documentation.
Route::get('/user/profile', function () {
//
})->name('profile');
You can get absolute url in blade template with route helper.
Text
the answer to this one will probably be obvious to many of you, but I recently decided to make a website for my girlfriend and expand my knowledge while doing that. So here is my dilemma:
I am using the Blossom Mommy Blog theme, which is a child of the Blossom Feminine theme.
Below a single post page, there is a previous post/ next post navigation menu and the "previous/next" text is in English and I want to change that to be in Bulgarian. I was able to see this in the browser debugger, but I can't seem to find where this comes from in the theme files themself, so any help would be really appreciated!
P.S. I even prepared a screenshot, but apparently I cannot attach files here...
P.P.S. Tried looking at the parent and child functions.php, also the templates, but could not find this HTML. Looks like some function is calling it, but I have no idea where to find this function.
With many thanks,
Dobri
Function: previous_posts_link();
Function: next_posts_link();
Use:
previous_posts_link( "Your label" );
More info:
https://codex.wordpress.org/Function_Reference/next_posts_link
https://codex.wordpress.org/Function_Reference/previous_posts_link
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.
Hello could anyone please help me with my Joomla website. I need to add a CSS Container in the middle of the page but don't know how to add it. I can provide login details if you like if anyone wants to have a look for me and help me out.
Thankyou so much much appreciated.
Hi The best thing to do is to either edit an article by targeting the code editor and adding an element there e.g. <div></div> and then style that appropriately.
The second option would be to create a custom html module (Extensions > Module Manager) and then create a Custom HTML module. You should then chose your module position and include it on the page that you want to display the Custom HTML from your module. see Joomla Module Positions
Finally if you add this directly to your active template code (which can be found under the templates folder in your main Joomla folder).
I have to create Joomla website. I am PHP programmer, but new to Joomla.
I have spent a lot, reading tutorials and other staff.
The website is very simple, it is visit card for restaurant.
I have installed Joomla 2.5. Spending two days I have managed to do the following:
- create menu
- create multi language site (2 languages) with language swicher
- create simple static pages (articles)
- create one page as contact
- create simple template just for my website
However, I cannot do some things and I have not found any answers in tutorials or google.
If you open this file http://img1.uploadscreenshot.com/images/orig/1/2621034793-orig.jpg you can see images with three different pages on the site:
1) Article with three images on the right.
Basically, I do not know what is the best practice to create article with some custom HTML in it (in this case these are images). For example, i can create table with two columns - one for text, another for images. Without Joomla I would create two divs, but how this can be done here??? Also with custom html I need to do the same for each language - I need to add images for each language, I do not like this. I really have not found any solutions for this. Do you have some suggestions?
2) Article with three buttons on the right side. This is article on landing page.
This is probably the same question - how to create article with some custom HTML in it (in this case these are three buttons - links to pages inside the website)? Again I can create table with text and buttons, but this should be done for each language. Is it a good practice? Do you have some other suggestions to create article with three buttons on the right side? Maybe I can create some custom module, but this sounds strange.
3) Contact page with google map.
I have create contact page with contact details. This is another question, I would ask other time.
Hello Renathy and welcome to Joomla!
1) You can of course insert divs in the editor and style them with floats; but as you mention this is pretty bad for translation, and allows the user to easily break the layout.
You have the following options:
1.a)
Joomla 2.5+ supports an article image and thumbnail that you can specify in the Images and Links group for each article. Quite some work to extend to 3 images, you would need to write a plugin (or do a nasty core hack) and override the view; also it's not well documented. There is a discussion here about it: Add additional images to articles in Joomla 2.5
1.b)
Add the extra images as above with the plugin. Then use a module for displaying the images instead of the view override.
1.c)
Use a custom image management solution to link images to an article, then a plugin to display them. Easier, but still a lot of work. I have done this on one site and worked fine, although I would change a lot of code now. As far as I know there are no extensions available that will do this.
All three solutions allow you to use proper floating of the contents using divs floats responsive as appropriate, and will isolate the layout of the content from the images, thus obtaining a solid environment for the content editors, and easy translation (although, if you go with 1.a) or 1.b), I strongly advise you to use a proper translation suite such as Falang or JoomFish (Falang is a different port of Joomfish from the old 1.5 version)
2)
You will address this as above, with a module.
Create in your template a main
<div class="content-box">
<div class="content-main"> here you will place your component's output.</div>
<div class="content-sidebar"> here you will output a new module position, name it "article-sidebar"</div>
Then style it like this:
div.content-box {
/* here you need a clearfix choose one here: https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */
}
div.content-box div.content-main {
width:70%;display:inline-block;float:left;
}
div.content-box div.content-sidebar {
width:29.99%;float:right;
}
div.content-wide div.content-sidebar {
display:none;
}
But you may not want this on all pages, then you can deal with it programmatically when generating the template.
The idea is: in your template output, where you are writing
<div class="content-box">
instead add a class conditionally when your article-sidebar contains something:
<div class="content-<?php
if ($this->countModules("article-sidebar")==0)
echo "wide";
else
echo "box";
?>">
This will dinamically change the class of the div, so you only serve 1 css.
At this point, create a module and choose to display it "Only on selected pages" .
3)
When you want to change a view, never change the file in place. Instead copy all the view's php to a folder under your template's folder / html/com_contact/contact. Even if you're changing a different layout, you will still need to copy there the default.php.
Then change it inserting the google maps.
A final consideration. You should refrain from editing core files. Joomla sometimes issues security updates, and applying them will be painful. Good luck with your site.