pwired

I don't see this thread making any violations against rule 4 (politics&religion) of posting rules. Unless money and a new social platform is interpreted as such.

Thanks fly out for it. Going to edit some of my pages with this and report back.

Wouldn`t defining your own in a file or in the config settings not be more versatile ? e.g. cross editor compatible

Dollar street ? Central bank prints Dollars like paper, banks lends Dollars just with digital numbers in a computer. Lol you don´t hear that on TED. Back to the website. Looking in the Page Source at the assets paths this site could have been made with Processwire, not sure. They used bootstrap 3.3.7 for the css layout. Looking at the header, the website doesn't inform about their real goal, but showing a truck load full of pictures. Is it just me, or does the website inform where the donation money is going ? Just my 5 cts , peace out ✌️

Thanks for posting back on this bernhard and the link to $files->render() Yes with $files->render() I have at least the usual <?php echo between html tags I like this coding style: $var_topnavigation .= '<li><a href="' . $pages->get("/")->url . '"><img src="' . $homebutton->url . '"></a></li>' . "\n"; this way no <?php or <?php echo needed and you can normally use the html " quotes. You are right, it is time to move over to a better editor. I haven't seen how VSC handles inserting your own code snippets and editing directly online over FTP. I have seen a whole thread about VSC in dev talk so I will give it a try.

I have seen this coding style in a basic-page.php file $output .= ' <div class="hero is-dark is-medium" id="intro" style="background-image: url('.$images[0].')"> <div class="is-overlay is-blue"></div> <div class="hero-body has-text-centered"> <h1 class="title is-1"> <a href="'.$page->url.'"> '.$page->get('headline|title').' </a> </h1> <p class="subtitle has-text-centered is-5"> '.$page->textfield_html.' </p> </div> </div> '; The coding is vertically between the $output .= ' and '; This way you can use normal code indentation horizontally per line What do you think ?

Hi bernhard, Thanks for stepping in Here php gets normally highlighted And selected in red when I put the cursor in front of a php tag Here html format still gets highlighted but the php part turns green like normal text strings Here both html format and php turns green and nothing gets selected in red when I put the cursor in front of a tag

I am using the Bluefish editor. The code highlighting is working perfectly when I code plane html or php. But when these .= 'code ' . 'code ' { come in then I hardly have any code highlighting left. I am switching to wireRenderFile and $files->render because then I can code with highlighted code

Hi, The more you generate and concatenate pieces of markup, the less code is still highlighted by the editor. It doesn't matter what output strategy you work with, this problem stays the same. I think wireRenderFile and $files->render() keep the most code highlighted in the editor. Do you think that working with a MVC pattern will bring back better code highlighting in the editor ? How do you guys keep code still highlighted in your editor ?

You have to recheck how you are using Bootstrap css This isn't going anywhere: <a class="navbar-brand" href="#">Casa da Lógica</a> In your processwire backend did you rename Home to logos ? This way of navigation is not going to work: <ul class="nav navbar-nav"> <li class='active'><a href='/logos/'>Home</a> </li> <li><a href='/logos/oficina/'>Oficina</a> </li> <li><a href='/logos/logica/'>Lógica</a> </li> </ul> You have to use $pages->get to make the navigation work: <ul class="nav navbar-nav"> <li class='active'><a href="<?php echo $pages->get("/logos/")->url ?>">Home</a> </li> <li><a href="<?php echo $pages->get("/logos/oficina/")->url ?>">Oficina</a></li> <li><a href="<?php echo $pages->get("/logos/logica/")->url ?>">Lógica</a></li> </ul> Why do you link to your pages Oficina and Lógica like /logos/oficina/ and /logos/logica/ ? It should be /oficina/ and /logica/ Make a screenshot of your backend

Hi AndZyk Thanks for clarifying and the link, youtube is a great resource. I probably will play around with php a bit and dive into css display: good conversation by the way on that clip

Hi AndZyk Thanks for that. I didn't know about duplicate content on the same page will not be penalized. What about the website navigation part ? If I want to serve different navigation layouts for different screen widths and keep them unvisible, that would be duplicate content on all webpages I think. I am still trying to find some clever hook in the css media queries to set a value in a variable in php to select a $content in _main.php Didn´t expect it to be so hard to find. On the other hand, php is done on the server side and screen width is happening on the client side, so I might just drop the whole idea and go on with the usual responsive design.

Hi AndZyk Thanks for your replay. But I think it would be bad for SEO because Google does not like double content.

Hi, I know that Mobile Detect exists as a PHP class for detecting mobile devices, and that window.screen.width exists for javascript. But since processwire is so flexible, I think it must be possible to achieve detecting screen width and select a $content accordingly. I want to try to achieve to detect the screen width and then select a specific $content to render out in the _main.php. So when a visitor is looking at a website with a sreen width 1024px, then $content1 is selected and rendered in _main.php And I want to achieve the same thing for visitors who watch a webpage in different screen widths. So far I am trying to use @media queries to give a <div id="screenwidth"></div> a background image at certain screen widths. #screenwidth { width: 100px; height: 28px; } @media only screen and (max-width: 1024px) { #screenwidth { background-image: url(img/car.jpg); } } I want to use 3 different @media queries with max-width: 1024, 600 and 350px and give the <div id="screenwidth"></div> 3 different backgroud pictures, car, boat and bike.jpg for those different screen widths Then with PHP I want to detect if the background picture url exists for a certain screen width and use that to select a specific $content in the _main.php If background picture url exists: then select $content1 In the end I no longer want to use a background picture, but a transparant pixel (1px) The @media queries are working and the background pictures only show up at the different screen widths But I cannot use PHP to detect the different background picture urls because all 3 background picture urls already exist inside /templates/styles/img/ Does anyone have other approaches to get this to work to select a different $content on a different screen width ?

Very nice set of classes and all that in only 23 kb ! Good find. Some nice templates too: https://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm

Those video backgrounds are usually only there to spice up a home page or similar and are not big in size. Have a look at the video background of this website: https://isl.co/ That video background is only 5,3 Mb so it is easy to host on the same server as where your website is. I would not go for an iframe as it is often exploited by spammers. Use the html5 <video> tag instead. Use a webm version as well to be compatible with firefox browsers.

so good . . . . .

It seems that UIKit 3 has dropped uk-width-*-10 classes Something to elaborate https://github.com/uikit/uikit/issues/2250 https://github.com/uikit/uikit/issues/217

With CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV; and div added to be allowed In CKEditor it becomes simply only: <div id="" class=""> your text here </div> Easier than Hanna Code

Is there anything to configure in the Body Field settings to allow Hanna Code in CKEditor ?

I have been browsing through the ckeditor plugin repository and stumbled over this div plugin: https://ckeditor.com/cke4/addon/div Seems to have 8419824 downloads. I tried it out but did not see any significant advantage over using the config CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;

About installing CKEditor plugins: just installing is not the end of it ? You also need to add specific words in the CKEditor Toolbar settings, under the Body Field Input Tab, otherwise nothing will show up in the CKEditor Toolbar. These specific words seem to be "mystical" words as they are not to be found when you download a plugin, neither in the plugin zip file. You have to bounce over the Internet a bit to find these words ? For anyone who is going to install a CkEditor plugin to save some time finding these words, here are some words I found so far: For the font plugin the word are: Font, FontSize For the justify plugin the words are: JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, For the colorbutton plugin the words are: TextColor, BGColor, After entering these words, the corresponding buttons will show up in the CKEditor Toolbar. And because a picture says so much more, here is one:

Ok, some progress here at least I got something to work when I use CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV; now give it some id and I can handle it with some class and css echo "<div class='cke-content'>$page->body</div>";

Shift + Enter seems to work, but still does not get rid off the leading <p> tag

Hi Zeka Yes I have tried config.enterMode = CKEDITOR.ENTER_BR; and all it's variants that supposed to be working. None do make any difference, the <p> tag keeps on popping up.