Laravel: How to change div font - html

I am displaying a greeting to the user on my dashboard page, how can I change the first 2 words (the div) to be a larger, maybe even a different font? Can I add a space margin underneath too, to separate the greeting from the rest? (This is me trying to learn Laravel) Thank you :)
So far I've tried:
<div>
#isset($user)
<style type="text/css">
#font-face {
font-family: Muli-Bold;
src: url('{{ public_path('fonts/materialdesignicons-webfont.ttf') }}');
} // I guess I need an #endfont-face here, but for some reason my ide wasn't recognizing it
</style>
Hallo {{ $user->name }},
#endisset
</div>
<div>Willkommen im <b class="text-gray-700">Formular-Editor!</b></div>
<div>Neue Formulare kannst du über den Tab <i><b class="text-gray-700">"Editor"</b></i> oben in der Leiste anlegen. Hier kannst Du auch bestehende Formulare bearbeiten.</div>
(I've also tried putting "hello user" into the style component/tag)
also like this:
<div font-size="3">
Hallo {{ $user->name }}
</div>
But they haven't worked. What's the best way to make it work without insalling trailhead?

Move your #isset($user) to wrap the <div> element and apply your styles on the <div>. There is no point performing #isset($user) inside the <div> as all that will do is render a redundant empty element.
#isset($user)
<div style="font-family: Muli-Bold; font-weight: bold; text-decoration: underline; padding-bottom: 10px;">
Hallo {{ $user->name }},
</div>
#endisset
You can apply any other css styles you want in the same manner, however, it would be better to define one or more classes which encapsulate the required styling and then apply the class to your elements.

Related

Keep two HTML forms on the same line in a paragraph tag

I have a paragraph which has two seperate forms in it. However, when the page is loaded, there is a line break where each form starts. I am using the following code:
<p style="font-size:14px;font-weight:700;color:grey;">' . $user_pic . ' ' . $knockfirst . ' ' . $knocklast . ' is knocking. Let him in?
<form action="messages/group/addToChat.php" method="post" name="adduser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '">Yes</form>
<form action="messages/group/declineKnock.php" method="post" name="declineuser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '"> |
No</form></p>
Is there any way to keep this all on the same line when it's rendered onto the page?
Add this to your css:
form {
display: inline-block; //Or display: inline;
}
Fiddle: http://jsfiddle.net/trW82/
add float style to the first form -
style="float: left;"
better yet, create a separate CSS class -
.chatForm {
float: left;
}
and assign this class to the first form -
<form class="chatForm" ......
You can also set display property of both form to either inline or inline-block -
.chatForm, .declineForm {
display: inline-block; /* or inline */
}
and then -
<form class="chatForm" .....
<form class="declineForm" ....
Demo.
Check out the sitepoint reference on display and float.
Give the forms a width (ie: style="width:300px") and then wrap each of the forms in a span tag
<p>
<span><form style="width:300px;" /></span>
<span><form style="width:300px;" /></span>
</p>
Failing that you can use the following style on the form:
<p>
<form style="width:300px; display:inline-block;" />
<form style="width:300px; display:inline-block;" />
</p>
Or you could try:
<p>
<div style="width:300px; display:inline-block;"><form /></div>
<div style="width:300px; display:inline-block;"><form /></div>
</p>
You may also want to move the style information into a CSS class definition for consistency.
There's always more than one way of doing things in HTML + CSS.
Good luck!
None of the previous answers here have pointed out the fact that your HTML is invalid in the first place. According to the HTML spec, a <p> element cannot have a <form> as part of its content.
But since HTML is weird, there is still a way to have two forms inside the same (logical) paragraph, by not putting them in a <p>, but in a <div>, for example:
<div>
<form style="display: inline;"><input type="submit" value="Submit 1"></form>
<form style="display: inline;"><input type="submit" value="Submit 2"></form>
</div>
This is valid HTML according to Nu HTML Checker.
This solution is not very flexible, as it works only if the forms are directly inside a block element such as <div>, which in turn can only be inside other block elements. But as far as I know, this is the only (valid) way in which two forms can be in the same paragraph.

Using html-tags within HTMTL::link_to_route()

In Laravel, how can I use html-tags when linking to a route via HTML::link_to_route()?
Example of what I have:
<li>
{{ HTML::link_to_route( "books_new", "New Book" ) }}
</li>
What I would like to do:
<li>
{{ HTML::link_to_route(
"books_new",
"<span class='icon-book'></span>New Book"
) }}
</li>
I know this is not the answer you want to hear - but you cannot pass html via link_to_route.
The problem is the output from the HTML class is escaped automatically. So if you try to pass this:
{{ HTML::link_to_route('author','<img src="'.URL::base().'assets/images/image.jpg" alt="icon" />')) }}
it comes out like this:
<img src="http://laravel3.dev/assets/images/image.jpg" alt="icon" />
which will just be text on the screen - no image. Instead you need to use URI::to_route('author') and generate the link yourself. So make a helper a like this (not tested):
function link_to_route_image($route, $image)
{
$m = '<a href="'.URL::to_route($route).'">'
. '<img>'.$image.'</img>'
. '</a>';
return $m;
}
How about something like this?
<li>
<span class='icon-book'></span>New Book
</li>
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before". You might need a bit of adjustment in CSS; but it might be better in terms of semantic mark-up.
<a href="{{ URL::route('empdelete', array('id' => $employee->id)) }}">
<img src="{{ asset('images/tick-red.jpg') }}" alt="DRC" id="DRCS-logo" /></a>
You can not have HTML markup with HTML::.... (class) , in the documentation they say that anything that is passed as a parameter to the class is escaped with an HTML entity function to make front-end safer!
You can include font awesome or icon into Laravel Blade Template using this code, i already use and work perfect.
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before".
So this is working for me:
<li>
{{ HTML::link_to_route( "books_new", "New Book", null, ['class' => 'fa fa-edit'] ) }}
</li>
So far as I know, Laravel doesn't allow you to do that. To me, it seems out of standards.
Rather, apply a class called icon-book to your anchor tag, and then use the class to put the icon inside your anchor as a 'background-image`.
HTML::link_to_route('books_new', 'New Book', array('class' => 'icon-book'))
Alternatively:
Insert the span tag inside the li tag
Assign the icon-book class to the li tag

Unwanted Char Appears Giving Url to Images

I have images in this order : [image][image]
When i give each of them an url, - char suprisingly appears between them.I don't understand why - appears.
Here is the code :
<div style='float:left; width:320px;'>
<span>
<a href='http://www.boun.edu.tr'/>
<img style='width:75px; height:75px' src='$img_root/logo_bogaz.jpg' alt='logo bogazici university'>
</span>
<span>
<a href='http://www.gyte.edu.tr'/>
<img style='width:70px; height:70px' src='$img_root/gyte.gif' alt='logo gyte'>
</span>
</div>
And OUTPUT :
It is part of the underline from your anchor tag. You can remove the underline as per below. (Note this will remove it for all links)
Add this to fix:
<style>
a {
text-decoration:none;
}
</style>
Ideally this should go in a separate CSS file. But add it to the top of your HTML for an easy test.

Confusion at orderliness while using unordered list

I think my question is the simplest question on this site. Nevertheless i couldn't solve it.
Now, i have a html like bottom. Elements have to be shown side by side. However output is like in picture below. Also, I did not get where the underscore come up from.
How can i do what i want?
<div class="ilgiliclass">
<?php
echo '<ul>';
if(...)
{
foreach(...)
{
if(...)
{
?>
<li>
<img src="img/arrow.gif">
<div class="si">
...
</div>
-
<div class="so">
...
</div>
<br />
</li>
<?php
}
}
}
?>
</ul>
You have a dash in your markup between the si and so elements. I imagine that's the 'underscore' you are talking about. Both .si and .so could be set to display:inline;, which should put everything on one line.
JS Fiddle Example: http://jsfiddle.net/TYsN6/

How can I target a class within a class with CSS?

I've been up for hours trying and failing to make this work.
I have some code like this:
<h1 class="title ">MasterClass Lessons</h1>
<div class="view view-uc-products view-id-uc_products view-display-id-page_4 3col-grid view-dom-id-1">
<div class="view-content">
<table class="views-view-grid">
<tbody>
<tr class="row-1 row-first">
<td class="col-1"><div class="panel-display panel-1col clear-block" >
<div class="panel-panel panel-col">
<div>
<div class="views-field-field-image-cache-fid">
<div class="field-content">
<a href="/content/gold-pass-all-lessons">
</div>
</div>
<div class="views-field-title">
<span class="field-content">GOLD PASS - ALL LESSONS!</span>
</div>
I want to target the class "views-field-title" with a style sheet, but I only want to apply a style when it's a subclass of "3col-grid" which is specified in a div a few levels above. Drupal lets me specify my own class name (I used 3col-grid) for the specific purpose of this CSS targeting, but when I do the following…
<style>
.3col-grid .views-field-title {
font-weight:bold;
}
</style>
It doesn't work.
I also tried
.3col-grid>.views-field-title
and
.3col-grid * .views-field-title
and
.3col-grid*.views-field-title
I'm sure there must be a way to make it work, and I'm sure it's quite simple.
Anyone who can tell me what that is will make me a happy man.
Thanks,
Joe
Your HTML is invalid.
CSS classnames cannot begin with numbers.
Once you fix that, you can use the descendant selector:
.OuterClass .InnerClass