Is there a way to add linebreaks to the Logo and Masthead text fields in Adobe Portfolio?

[Matthew249224202mcs]

This is maddening.  Using Ctrl Enter or Alt Enter does NOT help.  Adding <br>  looks like it helps until you publish the website and come back to see <br> tags.

Better still, is there a wysiwyg editor somewhere that I'm missing?

[Neelamk]

Hi Matthew,

Thank you for writing to us. Could you please refer to the below article link for more info:

https://helpx.adobe.com/in/creative-cloud/how-to/create-portfolio-website.html

Please let us know if this helps. we are here to help you.

Regards,

Neelam

[Matthew249224202mcs]

Hello Neelam,

Unfortunately, it did not help.  The instructions are very generalized and don't get into specific editing of fields.

[ls_rbls]

++Adding to the topic,

Would you mind sharing in what computer device are you not able to use the CTRL+Enter and ALT+ Enter  keyboard combos (Micrososft Windows or macOS)?

I don't see the relationship of using those keyboard shortcuts in order to be able to add lines to the logo and the masthead of your Adobe portfolio.

Perhaps you can share a screenshot with no sensitive data to show what exactly are you seeing on screen when you employ the keyboard shortcuts.

And  which type of web browser are you using to edit your Adobe Portfolio  with these keyboard combos?

Does it happen in Firefox, Google Chrome, Safari, Microsoft Edge, Opera?

Please be specific.

[Matthew249224202mcs]

It is happening in Windows with Chrome and Brave.  
I've tried (both left and right)
Ctrl+Enter

Shift+Enter
Alt+Enter

Ctrl+Shift+Enter
Ctrl+Alt+Enter

Alt+Shift+Enter

Nothing happens in any of these cases.  
The closest I've gotten to something useful was using <br> tags. But as soon as the website is published, they appear as part of the text.

FYI I'm trying to fix this in both the title field and the Masthead Title Field

Thanks

[Nancy OShea · Accepted solution]

Try Shift + Enter for line break.

[Matthew249224202mcs]

Unfortunately no luck.  What browser were you using where that worked?

[Matthew249224202mcs]

I was mistaken, Nancy OShea was correct.

The trick is to create the linebreak in the web page text masthead field, NOT in the text field on the left where you're "supposed" to add it. 

THANKS!

[ls_rbls]

Awesome! 

Thank for clarifying.

[ls_rbls]

Is there a way to add linebreaks to the Logo

Well, now I'm a bit confused because the SHIFT+ENTER doesn't do line breaks for the  text in the Logo container.

Are you saying that this keyboard shortcut worked for you in the Logo text?

If it did, please share how.

Also the Masthead text line breaks are retained when you preview or update Live Site.

Not when you go back to editing (it reverts).

[ls_rbls]

++Adding to  the always valuable guidance of Nancy

What you're asking is not possible, I'm afraid.

Actually, the best answer was already addressed by Nancy in the thread posted below:

• https://community.adobe.com/t5/acrobat-discussions/bug-fixes-an-optional-update-of-acrobat-amp-reade...

However, if you read carefully the Adobe Help Center guidance posted by @Neelamk  and additionally, also read carefully the links posted by Nancy (topic linked above), you'll notice that there are partially true answers to your question.

Continue reading and I will get to the point of why I say the answers provided at this time are partially true.

For instance, it is true that you cannot edit code with the HTML method that you're using because Adobe Portfolio is a closed-source editing tool that was design with the sole purpose of facilitating users with the ability to create simple websites on the fly, easily and quickly, through a variety  of showcasing templates that you can build upon.

As such, the Adobe Portfolio editing tool is accessed online and it  is comprised of various programming languages which may include at a minimum (but not limited to), JavaScript, PHP, HTML, and Cascading Style Sheets (CSS).

Moreover, the templates are already autotagged.

You can test and change the HTML tags as much as you want with the web browser's console editor, for example.

But as soon as you upload or preview the portfolio website it will switch back (as you've observed).

Moreover, the provided editing tool resembles a mix of Adobe Bridge and AdobeXD, for which the keyboard shortcuts that you have exhausted are incorrect and won't map as desired.

In any case, if you're using a Chromium-based web browser or a Google Chrome web browser, you can indeed modify the keyboard shortcuts that you need.

This, however, is a new feature in those web browsers.

And it is accessed using CTRL+SHIFT+I to open the Developer Mode in Google Chrome.

From there you'll be able to customize keyboard shortcuts. Nevertheless, it is worth noting that they will be employed exclusively by the Editing Console for that web browser; not with the Adobe Portfolio editing tool.

So in short, the first part to your answer is No, you may not use that method while you're online using the Adobe Portfolio editing tool.

The second part to your answer, is Yes: You can modifiy the HTML tags and the JavaScript if you save the entire page as HTML directly to your computer as an offline HTML file.

The HTML tags that are reverting the changes that you are trying to edit in the Masthead Logo and the Masthead Title elements is enforced by this line of code :

<span class="preserve-whitespace"> My Masthead Title goes here</span>

In addition, by default HTML will ignore white spaces and line breaks if they are not properly defined.

***NOTE:

If you were doing this with JavaScript,  a new line break would be expressed as \n for a new line.

***

But anyhow,  just for testing purposes, you can see for yourself that you can modify HTML code with the web browser console as you have it opened right next to the portfolio page that you want to edit

[-- just remember that this will only work if the web page is saved as an HTML file in your computer --].

Select the Masthead Logo text with your mouse pointing device, right-click on that selection to open the context menu; select "Inspect" from the context menu (or CTRL+SHIFT+I).

Look at the developer's console "Elements" tab.

You'll see that the line of code  that pertains to the Masthead Logo text that was selected it will appear highlighted.

To change the HTML code that I outlined above, right-click on that selection and select from the context menu "Edit as HTML" to change the code to:

<span>My Masthead Title<br> goes here</span>

Notice how the line break tag is employed in my text example for the masthead title.

Or, you may also select from the context menu "Edit attribute" to actually delete the class (or id attribute) that is preserving the white space imposed by the Adobe Portfolio template.

Delete the line below only that is in-between the first tag of the content span element and the example title text:

class="preserve-whitespace"

Last, be advised of a few other considerations:

• the Masthead Logo title and the Masthead Title are both linked to other navigational buttons. In which case, you may need to repeat the step above to remove the undesired id attributes and employ the <br> as needed in your text titles.

• You may save your changes and they will remain intact as long as the offline page is not linked back in ayway to your Adobe ID account.

• If you're using the free version of Adobe Portfolio, it may be good to ask Adobe if there is anything in the user agreement may allow a user to do this minor changes in order to insert a line break

Otherwise, I think that your observation about line breaks has brought forward a very valid Adobe Portfolio feature that should be released to the users (just a very personal opion).

[Matthew249224202mcs]

I'm quite a bit confused... 

If I understand your instructions, I can save the changes I make with the Chrome Developer tools, but only as an offline html file. "

• You may save your changes and they will remain intact as long as the offline page is not linked back in anyway to your Adobe ID account."

My question is basically... Ok, but what does that accomplish?  I'm trying to edit my website so the people using it will see the changes.

If I misunderstood, please let me know.

[ls_rbls]

What that accomplishes is that I answered your OP and clarified that the web site can be edited manually in whichever way you wish with whatever program that allows HTML code editing.

I just used Google Chrome to illustrate my point of how easy it is done.

And that the only way that this is hacked is if you download your portfolio as an offline HTML copy of such website to your computer; not possible with the online editing tool.

In other words, the showcase templates (free or not), to include the original scripting that was developed to interact with such templates with the Adobe Portfolio editing tool, belong to Adobe.

They are meant to be edited with the Adobe Portfolio tool and nothing else.

So technically the end result is not really your website.

If it was your own website you would have the freedom to modify content without restrictions and  the ability to host that website with a web hosting service of your choice in any part of the world that you choose.

Otherwise, the restrictions that Adobe itself has enforced in the portfolio creation tool would be unnecessary.

This is why I am suggesting to contact Adobe via user voice and request a feature to allow the users to do line breaks.

Based on what you've discovered, the inability to perform line breaks in the Masthead logo and Masthead title boxes, seems like a design behavior.

So, the current Adobe Portfolio help guidance that has been shared in these forums do not address such a feature.

The whole point is that, if you manually edit the HTML code in an offline copy of your Adobe Portfolio showcase, will Adobe allow you to upload that edited copy back to the portfolio web space that is associated with your Adobe ID?

That is what I was trying to imply without making this topic ethically sensitive.

[Matthew249224202mcs]

Gotcha, thank you much.